Permalink
Fetching contributors…
Cannot retrieve contributors at this time
322 lines (284 sloc) 11.2 KB
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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");
});
</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="theme">Facebook Theme & Sortable</h2>
<div>
<input type="text" id="demo-input-facebook-theme-sortable" name="blah2" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-facebook-theme-sortable").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
theme: "facebook",
makeSortable: true
});
});
</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: "&#x2603;"
});
});
</script>
</div>
<h2 id="custom-limits">Custom Search Delay, Search Limit &amp; 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>
<h2 id="pre-populated">Pre-populated</h2>
<div>
<input type="text" id="demo-input-pre-populated" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-pre-populated").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
prePopulate: [
{id: 123, name: "Slurms MacKenzie"},
{id: 555, name: "Bob Hoskins"},
{id: 9000, name: "Kriss Akabusi"}
]
});
});
</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="allowcustomentry">Allowing Custom Entry</h2>
<div>
<input type="text" id="demo-input-allowcustomentry" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-allowcustomentry").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
allowCustomEntry: true
});
});
</script>
</div>
<h2 id="customformatter">Custom Result Formatter for JSON</h2>
<div>
<input type="text" id="demo-input-customformatter" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-customformatter").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
allowCustomEntry: true,
tokensFormatter: function(tokens)
{
var result = [];
console.log(tokens);
for(var key in tokens)
result.push('"' + tokens[key].name.replace(/"/g, '\\"') + '"');
return '[' + result.join(',') + ']';
}
});
});
</script>
</div>
<h2 id="parsename">Using local data with parseName function and searchColumns setting</h2>
<div>
<input type="text" id="demo-input-parsename" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-parsename").tokenInput([
{id: 1, name: 'New York', state: 'NY'},
{id: 2, name: 'Palo Alto', state: 'CA'},
{id: 3, name: 'San Francisco', state: 'CA'},
{id: 4, name: 'Boston', state: 'MA'},
{id: 5, name: 'São Paulo', state: 'SP'},
{id: 6, name: 'Vitória', state: 'ES'}
],
{
parseName: function(element) {
return element.name + ', '+ element.state;
},
searchColumns: ['name', 'state']
});
});
</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"});
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>
</body>
</html>