Token Tag Input Autocomplete jQuery - Download Dynamic Token/Tag Input With Autocomplete - jQuery Tokeninput

Download Dynamic Token/Tag Input With Autocomplete – jQuery Tokeninput

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Token/Tag Input With Autocomplete – jQuery Tokeninput, hope it will help you in programming stack.

Token Tag Input Autocomplete jQuery - Download Dynamic Token/Tag Input With Autocomplete - jQuery Tokeninput

File Size: 24.6 KB
Views Total: 10333
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The jQuery Tokeninput plugin transforms the regular text field into a dynamic, easy-to-style token/tag input with autocomplete/typeahead support. The users are allowed to select multiple tokens/tags from a predefined list that loads data from local or remote dataset via AJAX.

How to use it:

1. Load the main JavaScript and CSS files in the html document.

view source
1 <script src="jquery.min.js"></script>
2 <script src="jquery.tokeninput.js"></script>
3 <link rel="stylesheet" href="token-input.css">

2. Load a theme CSS of your choice in the document. The plugin currently comes with 2 themes: Facebook and Mac:

view source
1 <link rel="stylesheet" href="token-input-facebook.css">
2 <link rel="stylesheet" href="token-input-mac.css">

3. Create a normal text input field in the document.

view source
1 <input type="text" id="demo-input">

4. Activate the token/tag input that loads autocomplete data from local JS objects.

view source
01 $("#demo-input").tokenInput([
02   {id: 7, name: "Ruby"},
03   {id: 11, name: "Python"},
04   {id: 13, name: "JavaScript"},
05   {id: 17, name: "ActionScript"},
06   {id: 19, name: "Scheme"},
07   {id: 23, name: "Lisp"},
08   {id: 29, name: "C#"},
09   {id: 31, name: "Fortran"},
10   {id: 37, name: "Visual Basic"},
11   {id: 41, name: "C"},
12   {id: 43, name: "C++"},
13   {id: 47, name: "Java"}
14 ]);

5. Activate the token/tag input that loads autocomplete data from external data source via AJAX requests.

view source
1 $("#demo-input").tokenInput("json.php", {
2   // options here
3 });

6. All default plugin options and callback functions.

view source
01 $("#demo-input").tokenInput({
02  
03   // Search settings
04   method: "GET",
05   queryParam: "q",
06   searchDelay: 300,
07   minChars: 1,
08   propertyToSearch: "name",
09   jsonContainer: null,
10   contentType: "json",
11   excludeCurrent: false,
12   excludeCurrentParameter: "x",
13  
14   // Prepopulation settings
15   prePopulate: null,
16   processPrePopulate: false,
17  
18   // Display settings
19   hintText: "Type in a search term",
20   noResultsText: "No results",
21   searchingText: "Searching...",
22   deleteText: "&#215;",
23   animateDropdown: true,
24   placeholder: null,
25   theme: null,
26   zindex: 999,
27   resultsLimit: null,
28  
29   enableHTML: false,
30  
31   resultsFormatter: function(item) {
32     var string = item[this.propertyToSearch];
33     return "<li>" + (this.enableHTML ? string : _escapeHTML(string)) + "</li>";
34   },
35  
36   tokenFormatter: function(item) {
37     var string = item[this.propertyToSearch];
38     return "<li><p>" + (this.enableHTML ? string : _escapeHTML(string)) + "</p></li>";
39   },
40  
41   // Tokenization settings
42   tokenLimit: null,
43   tokenDelimiter: ",",
44   preventDuplicates: false,
45   tokenValue: "id",
46  
47   // Behavioral settings
48   allowFreeTagging: false,
49   allowTabOut: false,
50   autoSelectFirstResult: false,
51  
52   // Callbacks
53   onResult: null,
54   onCachedResult: null,
55   onAdd: null,
56   onFreeTaggingAdd: null,
57   onDelete: null,
58   onReady: null,
59  
60   // Other settings
61   idPrefix: "token-input-",
62  
63   // Keep track if the input is currently in disabled mode
64   disabled: false
65    
66 });

7. API methods.

view source
01 var myToken = $("#demo-input").tokenInput();
02  
03 // add a new item
04 myToken.tokenInput("add", {id: x, name: y});
05  
06 // remove an item
07 selector.tokenInput("remove", {id: x});
08 selector.tokenInput("remove", {name: y});
09  
10 // clear the input
11 selector.tokenInput("clear");
12  
13 // get the data
source : jqueryscript.net

Related posts: