diff --git a/.gitignore b/.gitignore index b8b373ed..79fd6228 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ _layouts gh-pages *.sw* node_modules +bower_components diff --git a/Gruntfile.js b/Gruntfile.js index a4d8f7dc..bee7f2e0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -6,7 +6,7 @@ module.exports = function(grunt) { uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', - compress: true + compress: {} }, build: { src: 'src/<%= pkg.name %>.js', @@ -21,4 +21,4 @@ module.exports = function(grunt) { // Default task(s). grunt.registerTask('default', ['uglify']); -}; \ No newline at end of file +}; diff --git a/README.md b/README.md index 7642be82..9809c8d0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ jQuery Tokeninput: A Tokenizing Autocomplete Text Entry ======================================================= + Overview -------- @@ -7,6 +8,14 @@ Tokeninput is a jQuery plugin which allows your users to select multiple items f Documentation, Features and Demos --------------------------------- -Full details and documentation can be found on the project page here: +Full details and documentation can be found on the project page here: + +Installation +------------- +* install via npm + * [install npm](https://nodejs.org/download/) + * `npm install -g bower` + * `bower install jquery-tokeninput` +* [download source](http://loopj.com/jquery-tokeninput/) +* [fork](https://github.com/loopj/jquery-tokeninput) - \ No newline at end of file diff --git a/demo.html b/demo.html index 55e289bc..8010a4c4 100644 --- a/demo.html +++ b/demo.html @@ -2,225 +2,247 @@ + - - + - -

jQuery Tokeninput Demos

- -

Simple Server-Backed Search

-
- - - -
- - -

Simple Local Data Search

-
- - - -
- - -

Facebook Theme

-
- - - -
- - -

Custom Labels

-
- - - -
- - -

Custom Delete Icon

-
- - - -
- - -

Custom Search Delay, Search Limit & Token Limit

-
- - - + + + +
+
- - -

Custom Token Delimiter

-
- - - -
- - -

No Duplicates

-
- - - -
- - -

Pre-populated

-
- - - -
- - -

Pre-populated & Token Limit

-
- - - -
- - -

Disable Animation on Dropdown

-
- - - +
+
+

jQuery Tokeninput Demos

+
    +
-

Modify Response with onResult Callback

-
- - - + +
+ +
+

Local Search

+

The JSON array may be included in the tokeninput upon initialization

+ + + + $("#input-id").tokenInput(" + {id: 1, name: "item a"}, + {id: 2, name: "item b"}, + {id: 3, name: "item c"}, + {id: 4, name: "item d"}, + ... + "); + +
+ +
+

Sever-Backed Search

+

The JSON array may be retrieved from a serer

+ + + + $("#input-id").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", { }); + +
+ +
+

Theme

+

Customize theme - Facebook theme shown

+ + + + $("#demo-input-facebook-theme").tokenInput(jsonArray, { + theme: "facebook" + }); + +
+ +
+

Labels

+

Customize search labels

+ + + + $("#demo-input-custom-labels").tokenInput(jsonArray, { + hintText: "I can has TV Shows?", + noResultsText: "O noes", + searchingText: "Meowing..." + }); + +
+ +
+

Delete Icon

+ + + + $("#demo-input-custom-delete").tokenInput(jsonArray, { + deleteText: "&#x2603;" + }); + +
+
+

Pre-populated Field

+ + + + $("#demo-input-pre-populated").tokenInput(jsonArray, { + prePopulate: [ + {id: 123, name: "Slurms MacKenzie"}, + {id: 555, name: "Bob Hoskins"}, + {id: 9000, name: "Kriss Akabusi"} + ] + }); + +
+
+

Token Limit

+ + + + $("#demo-input-pre-populated-with-tokenlimit").tokenInput(jsonArray, { + prePopulate: [ + {id: 123, name: "Slurms MacKenzie"}, + {id: 555, name: "Bob Hoskins"}, + {id: 9000, name: "Kriss Akabusi"} + ], + tokenLimit: 3 + }); + +
+
+

Delay & Start Limit

+

Set Limit of number of entered characters to start searching and set delay before search begins

+ + + + $("#demo-input-custom-limits").tokenInput(jsonArray, { + searchDelay: 2000, + minChars: 4, + tokenLimit: 3 + }); + +
+
+

Token Delimiter

+

Select two or more items, and click submit to preview

+ + + + $("#demo-input-custom-delimiter").tokenInput(jsonArray, { + tokenDelimiter: "_DELIMITER_" + }); + +
+ +
+

Eliminate Duplicates

+

Try to add two of the same items

+ + +

+ $("#demo-input-prevent-duplicates").tokenInput(jsonArray, { + preventDuplicates: true + }); + +
- return results; - } - }); - }); - -
-

Using onAdd and onDelete Callbacks

-
- - - -
- - -

Using the add, remove, clear and toggleDisabled Methods

-
- Add Token | - Remove Token | - Clear Tokens | - Toggle Disabled
- - - -
- -

Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter

-
- - - -
- -

Change propertyToSearch anytime

-
- - Search by : First Name - Last Name - Email - Url
- - -
- -

Start disabled

-
- - - -
+ +
+ +
+

Programmatically Modify Input

+

Using the add, remove, clear and toggleDisabled Methods

+ Add Token | + Remove Token | + Clear Tokens | + Toggle Disabled
+ + + + $("#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; + }); - <h2>Free Tagging</h2> - <div> - <input type="text" id="demo-input-free-tagging" name="blah" /> - <input type="button" value="Submit" /> - <script type="text/javascript"> - $(document).ready(function() { - $("#demo-input-free-tagging").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", { - allowFreeTagging: true - }); - }); - </script> - </div> + // Clear all tokens + $("#plugin-methods-clear").click(function () { + $("#demo-input-plugin-methods").tokenInput("clear"); + return false; + }); - <h2>Exclude Current Tokens From Autocomplete</h2> - <div> - <input type="text" id="demo-input-local-exclude" name="blah" /> - <input type="button" value="Submit" /> - <script type="text/javascript"> - $(document).ready(function() { - $("#demo-input-local-exclude").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"} - ], { - excludeCurrent: true + // Toggle Disable / Enable the widget + $("#plugin-methods-toggle-disable").click(function () { + $("#demo-input-plugin-methods").tokenInput("toggleDisabled"); + return false; }); - }); - </script> - </div> + +
+ + + + + +
+

Start Disabled

+ + + + $("#demo-input-disabled").tokenInput(jsonArray, + { disabled: true, + prePopulate: [ + {id: 123, name: "Slurms MacKenzie"}, + {id: 555, name: "Bob Hoskins"}, + {id: 9000, name: "Kriss Akabusi"} + ]} + ); + +
+ +
+

Free Tagging

+

Add items that do not already exist in list

+ + + + $("#demo-input-free-tagging").tokenInput(jsonArray, + { allowFreeTagging: true } + ); + +
+ +
+

Exclude Repetition

+

Set to not repeat any already selected tokens in search list

+ + + + $("#demo-input-local-exclude").tokenInput(jsonArray, + { excludeCurrent: true } + ); + +
+
diff --git a/examples/demo.css b/examples/demo.css new file mode 100644 index 00000000..2bb288db --- /dev/null +++ b/examples/demo.css @@ -0,0 +1,58 @@ +body { + font-family:"Palatino"; +} +a { + text-decoration:none; +} +.sideBarList { + padding: 5px; + margin: 0 auto; + list-style: none; +} +.sideBarListItem { + padding: 0.5em 0 0 0; + margin: 0.1em 0 0 0; +} +.left-container { + background-color: #f2f2f2; + float:left; + height: 100%; + position: fixed; + overflow: auto; +} + +.top-container { + text-align: center; + height: 60px; + z-index: 0; + width: 100%; + top: 0; +} +.nav { + padding: 0.5em 0 0 0; + margin: 0.1em 0 0 0; + list-style:none; +} + +.container { + margin: 0 0 0 250px; + min-width: 500px; +} + +.example { + font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + font-size: 0.8em; + overflow: auto; + width: auto; + padding: 5px; + background-color: #ffffe8; + padding-bottom: 20px; + outline: 1px solid gray; +} + +.section { + width: auto; + padding: 5px; + margin: 20px; + padding-bottom: 20px; +} diff --git a/examples/demo.js b/examples/demo.js new file mode 100644 index 00000000..17988986 --- /dev/null +++ b/examples/demo.js @@ -0,0 +1,331 @@ + + +$(document).ready(function() { + $("input[type=button]").click(function () { + alert("Would submit: " + $(this).siblings("input[type=text]").val()); + }); + + $("#demo-input-basic-use").tokenInput(exampleList, { }); + $("#demo-input-local").tokenInput(alphabetList); + $("#demo-input").tokenInput(url, {}); + $("#demo-input-facebook-theme").tokenInput(url, { + theme: "facebook" + }); + $("#demo-input-custom-labels").tokenInput(url, { + hintText: "I can has TV Shows?", + noResultsText: "O noes", + searchingText: "Meowing..." + }); + $("#demo-input-custom-delete").tokenInput(url, { + deleteText: "☃" + }); + $("#demo-input-custom-limits").tokenInput(url, { + searchDelay: 2000, + minChars: 4, + tokenLimit: 3 + }); + $("#demo-input-custom-delimiter").tokenInput(url, { + tokenDelimiter: "_DELIMITER_" + }); + $("#demo-input-prevent-duplicates").tokenInput(url, { + preventDuplicates: true + }); + $("#demo-input-pre-populated").tokenInput(url, { + prePopulate: [ + {id: 123, name: "Slurms MacKenzie"}, + {id: 555, name: "Bob Hoskins"}, + {id: 9000, name: "Kriss Akabusi"} + ] + }); + $("#demo-input-pre-populated-with-tokenlimit").tokenInput(url, { + prePopulate: [ + {id: 123, name: "Slurms MacKenzie"}, + {id: 555, name: "Bob Hoskins"}, + {id: 9000, name: "Kriss Akabusi"} + ], + tokenLimit: 3 + }); + $("#demo-input-disable-animation").tokenInput(url, { + animateDropdown: false + }); + $("#demo-input-onresult").tokenInput(url, { + onResult: function (results) { + $.each(results, function (index, value) { + value.name = "OMG: " + value.name; + }); + + return results; + } + }); + $("#demo-input-plugin-methods").tokenInput(url); + + // 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; + }); + // Toggle Disable / Enable the widget + $("#plugin-methods-toggle-disable").click(function () { + $("#demo-input-plugin-methods").tokenInput("toggleDisabled"); + return false; + }); + $("#demo-input-onadd-ondelete").tokenInput(url, { + onAdd: function (item) { + alert("Added " + item.name); + }, + onDelete: function (item) { + alert("Deleted " + item.name); + } + }); + + $("#demo-input-local-custom-formatters").tokenInput(nameList, + { propertyToSearch: "first_name", + resultsFormatter: function(item){ return "
  • " + "" + "
    " + item.first_name + " " + item.last_name + "
    • " }, + tokenFormatter: function(item) { return "

  • " + item.first_name + " " + item.last_name + "

    • " + } + }); + $('input[name="search_key"]').click(function() { + $("#demo-input-change-propertytosearch-anytime").tokenInput("setOptions", {propertyToSearch: $(this).val(), hintText: "Type "+$(this).val()+" here to search"}); + }); + + $("#demo-input-change-propertytosearch-anytime").tokenInput(nameList, + { propertyToSearch: "first_name", + resultsFormatter: function(item){ return "
  • " + "" + "
    " + item.first_name + " " + item.last_name + "
    " + item.url + "
    • " }, + tokenFormatter: function(item) { return "

  • " + item.first_name + " " + item.last_name + "

    • " } + } + ); + + $("#demo-input-disabled").tokenInput(exampleList, + { disabled: true, + prePopulate: [ + {id: 123, name: "Slurms MacKenzie"}, + {id: 555, name: "Bob Hoskins"}, + {id: 9000, name: "Kriss Akabusi"} + ] + }); + + $("#demo-input-free-tagging").tokenInput(url, { allowFreeTagging: true }); + $("#demo-input-local-exclude").tokenInput(exampleList, { excludeCurrent: true }); +}); + + var url = "http://jquery-tokeninput-demo.herokuapp.com"; + var exampleList = [ + {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"} + ]; + var alphabetList = [ + {id: 1, name: "item a"}, + {id: 2, name: "item b"}, + {id: 3, name: "item c"}, + {id: 4, name: "item d"}, + {id: 4, name: "item e"}, + {id: 4, name: "item f"}, + {id: 4, name: "item g"}, + {id: 4, name: "item h"}, + {id: 4, name: "item i"}, + {id: 4, name: "item j"}, + {id: 4, name: "item k"}, + {id: 4, name: "item l"}, + {id: 4, name: "item m"}, + {id: 4, name: "item n"}, + {id: 4, name: "item o"}, + {id: 4, name: "item p"}, + {id: 4, name: "item q"}, + {id: 4, name: "item r"}, + {id: 4, name: "item s"}, + {id: 4, name: "item t"}, + {id: 4, name: "item u"}, + {id: 4, name: "item v"}, + {id: 4, name: "item w"}, + {id: 4, name: "item x"}, + {id: 4, name: "item y"}, + {id: 4, name: "item z"}, + ]; + var nameList = [{ + "first_name": "Arthur", + "last_name": "Godfrey", + "email": "arthur_godfrey@nccu.edu", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Adam", + "last_name": "Johnson", + "email": "wravo@yahoo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Jeff", + "last_name": "Johnson", + "email": "bballnine@hotmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Adriana", + "last_name": "Jameson", + "email": "adriana.jameson@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Adriano", + "last_name": "Pooley", + "email": "adrianolpooley@lautau.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alcir", + "last_name": "Reis", + "email": "alcirreis@yahoo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Jack", + "last_name": "Cunningham", + "email": "jcunningham@hotmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alejandro", + "last_name": "Forbes", + "email": "alejandforbes@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alessandra", + "last_name": "Mineiro", + "email": "alc_mineiro@aol.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alex", + "last_name": "Frazo", + "email": "alex.frazo@yahoo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alexandre", + "last_name": "Crawford", + "email": "xandycrawford@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alexandre", + "last_name": "Lalwani", + "email": "alexandrelalwani@globo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alexandre", + "last_name": "Jokos", + "email": "alex.jokos@gmail.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alexandre", + "last_name": "Paro", + "email": "alexandre.paro@uol.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Niemeyer", + "email": "a.niemeyer@globo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Alyssa", + "last_name": "Fortes", + "email": "afort287@yahoo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Amit", + "last_name": "Alvarenga", + "email": "amit.alva@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Ana Bia", + "last_name": "Borges", + "email": "abborges@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Ana", + "last_name": "Akamine", + "email": "ana.akamine@uol.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Anderson", + "last_name": "Tovoros", + "email": "alvarenga.tovoros@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Borges", + "email": "andreborges@hotmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Wexler", + "email": "andre.wexler@aol.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Williams", + "email": "awilly@yahoo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Sanford", + "email": "andre.sanford@gmail.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Wayne", + "email": "andrewayne@uol.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Jackson", + "email": "andre.jackson@yahoo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Jolly", + "email": "andre.jolly@uol.com.br", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }, + { + "first_name": "Andre", + "last_name": "Henderson", + "email": "andre.henderson@globo.com", + "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" + }];