Facebook / Youtube As Multiple Items Select
Before continuing: it cannot be a predefined list.
I need something like this: http://loopj.com/tokeninput/demo.html ... A jQuery plugin that allows the user to type in a string of words, press enter and this will make it a block of text, from there they can press the X button to get rid of it, or enter more keywords in the input area. I've found many things that do this, but all pull information from a predefined list of options.
a source to share
You will find here: http://www.spookandpuff.com/examples/tagEntry.html
The general meaning ...
- Allow the user to enter text as text
- When they hit enter, they check if the tag is new, and if so, add the value as an element to the list.
- Add a "remove" link to remove the tag from the list.
- Allow tags to be sent to the server evenly.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Free Tag Entry</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//The event handler for the input:
$('#tagEntry').keypress(function(event){
if (event.keyCode == '13') { //If Enter is pressed
var newTagName = $(this).attr('value');
//Clear the helper message:
$('#tagEntryHelper').text('');
//Check if the tag exists already:
if (
!$('#addedTags > li > .tagName').filter(function(){
return $(this).text() == newTagName;
}).length
) {
//If not, add the value to the list of tags:
$('#addedTags').prepend('<li><input type="checkbox" name="tagName" value="' + newTagName + '" checked="checked"/><span class="tagName">' + newTagName + '</span> <a href="#" class="remove">Remove</a></li>');
} else {
//Tell the user they messed up:
$('#tagEntryHelper').text('You already added that tag.');
};
//Clear the input ready for the next tag
$(this).attr('value', '');
}
});
//The event handler for removing tags via a 'remove' link/icon (live is used so it works on newly added tags):
$('#addedTags .remove').live('click', function(){
$(this).closest('li').remove();
return false;
});
//An event handler for removing tags via unchecking a box
$('#addedTags :checkbox').live('change', function(){
if ($(this).not(':checked')) {
$(this).closest('li').remove();
return false;
}
})
});
</script>
</head>
<body>
<input id="tagEntry" type="text"/> <span id="tagEntryHelper"></span>
<ul id="addedTags">
</ul>
</body>
</html>
This works, although I've used some jQuery conventions that make the code easier to read, but probably not the best from a performance standpoint. If you don't expect users to be working with thousands of tags, I wouldn't worry - everything should be fine.
I've included a checkbox in the list of tags - assuming you ultimately want to publish the contents of the list to the server (perhaps as part of a form). You can hide these checkboxes with CSS if you don't want them to be visible or you can use them as a removal mechanism if you like. Anyway, because all the checkboxes are named the same, your form will send back a comma-separated list of tags (which should be easy to handle on the server side).
Look at the demo - is this what you want?
a source to share
The site you linked to sends a request to a PHP page that returns the query results. What's stopping you from doing the same? PHP / ASP / No matter what page you send the request to can do whatever you need to do to get the list (from database, from external site - in cache or whatever) and then return results.
a source to share
Ok, I understand that you have the code to do this, but you don't need a predefined list.
The easiest way is to display the list as part of the server response. This way, your client code can reference this list displayed from the server. The downside to this is that it is static and not very flexible. This is the easiest, however, as the list can be displayed every time the page is reloaded.
Perhaps the best way is to make a webservice request for this list and define it on the client. This way you can dynamically move multiple content types without reloading the page. You have to make an Ajax request for the items and then load your list based on the Ajax response.
a source to share