Tokeninput is a jQuery plugin that allows users to select multiple items from a predefined list or database via AJAX.
Using autocompletion as they type to find each item.
You may have seen a similar type of text entry when filling in the.
Features
- Intuitive UI for selecting multiple items from a large list
- Easy to skin/style purely in CSS, no images required
- Supports any backend that can generate JSON, including PHP, Rails, Django, ASP.net
- Smooth animations when results load
- Select, delete, and navigate items using the mouse or keyboard
- Client-side result caching to reduce server load
- Cross-domain support via JSONP
- Callbacks when items are added or removed from the list
- Preprocess results from the server with the result callback
- Programmatically add, remove, clear, and get tokens
- Customize the output format of the results and tokens
Complete HTML Code
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="styles/token-input.css" type="text/css" />
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function () {
alert("Would submit: " + $(this).siblings("input[type=text]").val());
});
});
</script>
</head>
<body>
<h1>jQuery Tokeninput Demos</h1>
<h2>Simple Server-Backed Search</h2>
<div>
<input type="text" id="demo-input" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
// $("#demo-input").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
$("#demo-input").tokenInput("http://192.168.8.113/test/tableData.php", {
hintText: "I can has tv shows?",
noResultsText: "O noes",
searchingText: "Meowing..."
});
});
</script>
</div>
<h2>Simple Local Data Search</h2>
<div>
<input type="text" id="demo-input-local" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-local").tokenInput([
{id: 7, name: "Ruby"},
{id: 11, name: "Python"},
{id: 13, name: "JavaScript"},
{id: 17, name: "ActionScript"},
{id: 19, name: "Scheme"},
{id: 23, name: "Lisp"},
{id: 29, name: "C#"},
{id: 31, name: "Fortran"},
{id: 37, name: "Visual Basic"},
{id: 41, name: "C"},
{id: 43, name: "C++"},
{id: 47, name: "Java"}
]);
});
</script>
</div>
<h2 id="theme">Facebook Theme</h2>
<div>
<input type="text" id="demo-input-facebook-theme" name="blah2" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-facebook-theme").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
theme: "facebook"
});
});
</script>
</div>
<h2 id="custom-labels">Custom Labels</h2>
<div>
<input type="text" id="demo-input-custom-labels" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-custom-labels").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
hintText: "I can has tv shows?",
noResultsText: "O noes",
searchingText: "Meowing..."
});
});
</script>
</div>
<h2 id="custom-delete">Custom Delete Icon</h2>
<div>
<input type="text" id="demo-input-custom-delete" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-custom-delete").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
deleteText: "☃"
});
});
</script>
</div>
<h2 id="custom-limits">Custom Search Delay, Search Limit & Token Limit</h2>
<div>
<input type="text" id="demo-input-custom-limits" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-custom-limits").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
searchDelay: 2000,
minChars: 4,
tokenLimit: 3
});
});
</script>
</div>
<h2 id="prevent-custom-delimiter">Custom Token Delimiter</h2>
<div>
<input type="text" id="demo-input-custom-delimiter" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-custom-delimiter").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
tokenDelimiter: "|"
});
});
</script>
</div>
<h2 id="prevent-duplicates">No Duplicates</h2>
<div>
<input type="text" id="demo-input-prevent-duplicates" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-prevent-duplicates").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
preventDuplicates: true
});
});
</script>
</div>
<?php
if($_POST['mypost']){
print_r($_POST);
}
?>
<h2 id="pre-populated">Pre-populated</h2>
<div>
<form action="" method="POST">
<input type="text" id="demo-input-pre-populated" name="blah" />
<input type="submit" name="mypost" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-pre-populated").tokenInput([
{id: '123.op', name: "Slurms MacKenzie"},
{id: 'Bob/as', name: "Bob Hoskins"},
{id: 'Kriss_io', name: "Kriss Akabusi"}
], {
preventDuplicates: true
});
});
</script>
</div>
<h2 id="pre-populated-with-tokenlimit">Pre-populated & Token Limit</h2>
<div>
<input type="text" id="demo-input-pre-populated-with-tokenlimit" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-pre-populated-with-tokenlimit").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
prePopulate: [
{id: 123, name: "Slurms MacKenzie"},
{id: 555, name: "Bob Hoskins"},
{id: 9000, name: "Kriss Akabusi"}
],
tokenLimit: 3
});
});
</script>
</div>
<h2 id="disable-animation">Disable Animation on Dropdown</h2>
<div>
<input type="text" id="demo-input-disable-animation" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-disable-animation").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
animateDropdown: false
});
});
</script>
</div>
<h2 id="onresult">Modify Response with onResult Callback</h2>
<div>
<input type="text" id="demo-input-onresult" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-onresult").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
onResult: function (results) {
$.each(results, function (index, value) {
value.name = "OMG: " + value.name;
});
return results;
}
});
});
</script>
</div>
<h2 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h2>
<div>
<input type="text" id="demo-input-onadd-ondelete" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-onadd-ondelete").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
onAdd: function (item) {
alert("Added " + item.name);
},
onDelete: function (item) {
alert("Deleted " + item.name);
}
});
});
</script>
</div>
<h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
<div>
<a href="#" id="plugin-methods-add">Add Token</a> | <a href="#" id="plugin-methods-remove">Remove Token</a> | <a href="#" id="plugin-methods-clear">Clear Tokens</a><br />
<input type="text" id="demo-input-plugin-methods" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-plugin-methods").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
// Add a token programatically
$("#plugin-methods-add").click(function () {
$("#demo-input-plugin-methods").tokenInput("add", {id: 999, name: "James was here"});
$("#demo-input").tokenInput("add", {id: 111, name: "aaa was "});
$("#demo-input").tokenInput("add", {id: 222, name: "bbb was "});
return false;
});
// Remove a token programatically
$("#plugin-methods-remove").click(function () {
$("#demo-input-plugin-methods").tokenInput("remove", {name: "James was here"});
return false;
});
// Clear all tokens
$("#plugin-methods-clear").click(function () {
$("#demo-input-plugin-methods").tokenInput("clear");
return false;
});
});
</script>
</div>
<h2>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter</h2>
<div>
<input type="text" id="demo-input-local-custom-formatters" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-local-custom-formatters").tokenInput([{
"first_name": "Arthur",
"last_name": "Godfrey",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Adam",
"last_name": "Johnson",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Jeff",
"last_name": "Johnson",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Adriana",
"last_name": "Jameson",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Adriano",
"last_name": "Pooley",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alcir",
"last_name": "Reis",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Jack",
"last_name": "Cunningham",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alejandro",
"last_name": "Forbes",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alessandra",
"last_name": "Mineiro",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alex",
"last_name": "Frazo",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alexandre",
"last_name": "Crawford",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alexandre",
"last_name": "Lalwani",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alexandre",
"last_name": "Jokos",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alexandre",
"last_name": "Paro",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Niemeyer",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Alyssa",
"last_name": "Fortes",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Amit",
"last_name": "Alvarenga",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Ana Bia",
"last_name": "Borges",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Ana",
"last_name": "Akamine",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Anderson",
"last_name": "Tovoros",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Borges",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Wexler",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Williams",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Sanford",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Wayne",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Jackson",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Jolly",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Henderson",
"email": "[email protected]",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
}
], {
propertyToSearch: "first_name",
resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.first_name + " " + item.last_name + "</p></li>" },
});
});
</script>
</div>
</body>
</html>Ref. https://github.com/loopj/jquery-tokeninput
Related Post Image Lazy Loading Using JS
Like us on Facebook and Linkedin for more updates.
