From d934719e9f143c1329e9756a05a8da588944ee21 Mon Sep 17 00:00:00 2001 From: Bethany Armitage Date: Fri, 3 Jul 2015 15:14:08 -0700 Subject: [PATCH 1/5] Update README.md --- README.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7642be82..926c683b 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,13 @@ Documentation, Features and Demos --------------------------------- Full details and documentation can be found on the project page here: - \ No newline at end of file +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) + + From 404956de6e60ee74bb43f3bdbed34e1f4dcca0dd Mon Sep 17 00:00:00 2001 From: Beth Armitage Date: Fri, 3 Jul 2015 19:35:22 -0700 Subject: [PATCH 2/5] better further examples --- .gitignore | 1 + Gruntfile.js | 4 +- demo.html | 1064 ++++++++++++++------------------------------- examples/demo.css | 26 ++ examples/demo.js | 331 ++++++++++++++ 5 files changed, 698 insertions(+), 728 deletions(-) create mode 100644 examples/demo.css create mode 100644 examples/demo.js 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/demo.html b/demo.html index 55e289bc..da368871 100644 --- a/demo.html +++ b/demo.html @@ -2,225 +2,211 @@ + - - + - -

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

-
- - - -
- - -

Modify Response with onResult Callback

-
- - - -
- - -

Using onAdd and onDelete Callbacks

-
- - - + +
+ +
+

Simple 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"}, + ... + "); + +
+ +
+

Simple Sever-Backed Search

+

The JSON array may be retrieved from a serer

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

Custom Theme - Facebook

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

Custom Labels

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

Custom Delete Icon

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

Custom Search Delay, Search Limit & Token Limit

+

Type at least 4 characters and wait for delay

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

Custom Token Delimiter

+

Select two or more items, and click submit to preview

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

No Duplicates

+

Try to add two of the same items

+ + +

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

Pre-populated

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

Pre-populated & 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 + }); + +
+ +
+

Disable Animation on Dropdown

+ + + + $("#demo-input-disable-animation").tokenInput(jsonArray, { + animateDropdown: false + }); + +
+ +
+

Modify Response with onResult Callback

+ + + + $("#demo-input-onresult").tokenInput(jsonArray, { + onResult: function (results) { + $.each(results, function (index, value) { + value.name = "OMG: " + value.name; + }); + return results; + } + }); + +
+ +
+

Using onAdd and onDelete Callbacks

+ + + + $("#demo-input-onadd-ondelete").tokenInput(jsonArray, { onAdd: function (item) { alert("Added " + item.name); }, @@ -228,523 +214,149 @@ <h2 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h2> alert("Deleted " + item.name); } }); - }); - </script> - </div> - - - <h2 id="plugin-methods">Using the add, remove, clear and toggleDisabled 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> | - <a href="#" id="plugin-methods-toggle-disable">Toggle Disabled</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; - }); - - - // Toggle Disable / Enable the widget - $("#plugin-methods-toggle-disable").click(function () { - $("#demo-input-plugin-methods").tokenInput("toggleDisabled"); - 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": "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" - } - ], { - 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> - - <h2>Change propertyToSearch anytime</h2> - <div> - <input type="text" id="demo-input-change-propertytosearch-anytime" name="blah" /> - Search by :<input type="radio" checked="checked" name="search_key" value="first_name" /> First Name - <input type="radio" name="search_key" value="last_name" /> Last Name - <input type="radio" name="search_key" value="email" /> Email - <input type="radio" name="search_key" value="url" /> Url <br /> - <input type="button" value="Submit" /> - <script type="text/javascript"> - $(document).ready(function() { - $('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([{ - "id": 1, - "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" - }, - { - "id": 2, - "first_name": "Adam", - "last_name": "Johnson", - "email": "wravo@yahoo.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 3, - "first_name": "Jeff", - "last_name": "Johnson", - "email": "bballnine@hotmail.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 4, - "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" - }, - { - "id": 5, - "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" - }, - { - "id": 6, - "first_name": "Alcir", - "last_name": "Reis", - "email": "alcirreis@yahoo.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 7, - "first_name": "Jack", - "last_name": "Cunningham", - "email": "jcunningham@hotmail.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 8, - "first_name": "Alejandro", - "last_name": "Forbes", - "email": "alejandforbes@gmail.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 9, - "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" - }, - { - "id": 10, - "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" - }, - { - "id": 11, - "first_name": "Alexandre", - "last_name": "Crawford", - "email": "xandycrawford@gmail.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 12, - "first_name": "Alexandre", - "last_name": "Lalwani", - "email": "alexandrelalwani@globo.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 13, - "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" - }, - { - "id": 14, - "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" - }, - { - "id": 15, - "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" - }, - { - "id": 16, - "first_name": "Alyssa", - "last_name": "Fortes", - "email": "afort287@yahoo.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 17, - "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" - }, - { - "id": 18, - "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" - }, - { - "id": 19, - "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" - }, - { - "id": 20, - "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" - }, - { - "id": 21, - "first_name": "Andre", - "last_name": "Borges", - "email": "andreborges@hotmail.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 22, - "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" - }, - { - "id": 23, - "first_name": "Andre", - "last_name": "Williams", - "email": "awilly@yahoo.com", - "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png" - }, - { - "id": 24, - "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" - }, - { - "id": 25, - "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" - }, - { - "id": 26, - "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" - }, - { - "id": 27, - "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" - }, - { - "id": 28, - "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" - } - ], { - 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='first_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div><div class='url'>" + item.url + "</div></div></li>" }, - tokenFormatter: function(item) { return "<li><p>" + item.first_name + " " + item.last_name + "</p></li>" } - }); - }); - </script> - </div> - - <h2>Start disabled</h2> - <div> - <input type="text" id="demo-input-disabled" name="blah" /> - <input type="button" value="Submit" /> - <script type="text/javascript"> - $(document).ready(function() { - $("#demo-input-disabled").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"} - ], { - disabled: true, - prePopulate: [ - {id: 123, name: "Slurms MacKenzie"}, - {id: 555, name: "Bob Hoskins"}, - {id: 9000, name: "Kriss Akabusi"} - ] - }); - }); - </script> - </div> + +
+ +
+

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> + +
+ +
+

Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter

+

Only search by first name

+ + + + $("#demo-input-local-custom-formatters").tokenInput([{ + "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" + }, + ... ], + { + 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>" + } + }); + +
+ +
+

Change propertyToSearch anytime

+ + Search by : First Name + Last Name + Email + Url
+ + + $("#demo-input-change-propertytosearch-anytime").tokenInput(jsonArray, + { 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='first_name'>" + + item.first_name + " " + + item.last_name + " + </div> + <div class='email'>" + + item.email + " + </div> + <div class='url'>" + + item.url + " + </div> + </div> + </li>" + }, + tokenFormatter: function(item) { + return + "<li> + <p>" + item.first_name + " " + item.last_name + "</p> + </li>" + } + } + ); + +
+ +
+

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 Current Tokens From Autocomplete

+

does not repeat 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..be5e2e5f --- /dev/null +++ b/examples/demo.css @@ -0,0 +1,26 @@ +body { + font-family:"Palatino"; +} + +.container { + padding: 50px; + margin: 0 auto; +} + +.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 #ffffa1; +} + +.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..5f91b649 --- /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()); + }); + + $("#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" + }]; From f85167cc3657a7deb379e7dda8c5d4e233f6c34d Mon Sep 17 00:00:00 2001 From: Bethany Armitage Date: Fri, 3 Jul 2015 21:19:36 -0700 Subject: [PATCH 3/5] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 926c683b..9809c8d0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ jQuery Tokeninput: A Tokenizing Autocomplete Text Entry ======================================================= + Overview -------- @@ -7,7 +8,7 @@ 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 ------------- @@ -18,4 +19,3 @@ Installation * [download source](http://loopj.com/jquery-tokeninput/) * [fork](https://github.com/loopj/jquery-tokeninput) - From 2c9da7fa13cf144d3a5dc27de38e7d8057a98cdf Mon Sep 17 00:00:00 2001 From: Beth Armitage Date: Fri, 3 Jul 2015 21:56:36 -0700 Subject: [PATCH 4/5] side menu bar to jump to items --- demo.html | 182 ++++++++++++++++++++++++++++------------------ examples/demo.css | 38 +++++++++- examples/demo.js | 2 +- 3 files changed, 147 insertions(+), 75 deletions(-) diff --git a/demo.html b/demo.html index da368871..612e9bf5 100644 --- a/demo.html +++ b/demo.html @@ -10,13 +10,46 @@ + + +
    + +
    -

    jQuery tokeninput Demos

    +
    +

    jQuery Tokeninput Demos

    +
      +
    +
    +
    -

    Basic Use

    +

    Basic Use

    Use a JSON array with an HTML input element to create a tokeninput

    - + <input type="text" id="basic-use" /> @@ -38,16 +71,16 @@ <h3> Basic Use </h3> <hr/> ]; $(document).ready(function() { - $("#basic-use").tokenInput(exampleList, { }); + $("#demo-input-basic-use").tokenInput(exampleList, { }); }); </script>
    -

    Simple Local Search

    +

    Local Search

    The JSON array may be included in the tokeninput upon initialization

    - + $("#input-id").tokenInput(" @@ -61,9 +94,9 @@ <h3>Simple Local Search</h3> <hr/> </div> <div class="section"> - <h3>Simple Sever-Backed Search</h3> <hr/> + <h3 id="serverBackedSearch">Sever-Backed Search</h3> <hr/> <p> The JSON array may be retrieved from a serer</p> - <input type="text" id="demo-input" name="blah" /> + <input type="text" id="demo-input"/> <input type="button" value="Submit" /> <xmp class="example"> $("#input-id").tokenInput("http://jquery-tokeninput-demo.herokuapp.com", { }); @@ -71,8 +104,9 @@ <h3>Simple Sever-Backed Search</h3> <hr/> </div> <div class="section"> - <h3 id="theme">Custom Theme - Facebook</h3> <hr/> - <input type="text" id="demo-input-facebook-theme" name="blah2" /> + <h3 id="theme">Theme</h3> <hr/> + <p>Customize theme - Facebook theme shown</p> + <input type="text" id="demo-input-facebook-theme"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-facebook-theme").tokenInput(jsonArray, { @@ -82,8 +116,9 @@ <h3 id="theme">Custom Theme - Facebook</h3> <hr/> </div> <div class="section"> - <h3 id="custom-labels">Custom Labels</h3> <hr/> - <input type="text" id="demo-input-custom-labels" name="blah" /> + <h3 id="custom-labels">Labels</h3> <hr/> + <p>Customize search labels</p> + <input type="text" id="demo-input-custom-labels"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-custom-labels").tokenInput(jsonArray, { @@ -96,7 +131,7 @@ <h3 id="custom-labels">Custom Labels</h3> <hr/> <div class="section"> <h3 id="custom-delete">Custom Delete Icon</h3> <hr/> - <input type="text" id="demo-input-custom-delete" name="blah" /> + <input type="text" id="demo-input-custom-delete"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-custom-delete").tokenInput(jsonArray, { @@ -104,79 +139,78 @@ <h3 id="custom-delete">Custom Delete Icon</h3> <hr/> });
    -
    -

    Custom Search Delay, Search Limit & Token Limit

    -

    Type at least 4 characters and wait for delay

    - +

    Pre-populated Field

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

    Custom Token Delimiter

    -

    Select two or more items, and click submit to preview

    - +

    Token Limit

    + - $("#demo-input-custom-delimiter").tokenInput(jsonArray, { - tokenDelimiter: "_DELIMITER_" + $("#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 });
    -
    -

    No Duplicates

    -

    Try to add two of the same items

    - +

    Delay & Start Limit

    +

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

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

    Pre-populated

    - +

    Token Delimiter

    +

    Select two or more items, and click submit to preview

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

    Pre-populated & Token Limit

    - +

    Eliminate Duplicates

    +

    Try to add two of the same items

    +

    - $("#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 + $("#demo-input-prevent-duplicates").tokenInput(jsonArray, { + preventDuplicates: true });
    + +
    -

    Disable Animation on Dropdown

    - +

    Disable Animation

    +

    Disable animation on dropdown

    + $("#demo-input-disable-animation").tokenInput(jsonArray, { @@ -186,8 +220,9 @@ <h3 id="disable-animation">Disable Animation on Dropdown</h3> <hr/> </div> <div class="section"> - <h3 id="onresult">Modify Response with onResult Callback</h3> <hr/> - <input type="text" id="demo-input-onresult" name="blah" /> + <h3 id="onresult">Result Modification</h3> <hr/> + <p> Modify Response with onResult Callback</p> + <input type="text" id="demo-input-onresult"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-onresult").tokenInput(jsonArray, { @@ -202,8 +237,9 @@ <h3 id="onresult">Modify Response with onResult Callback</h3> <hr/> </div> <div class="section"> - <h3 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h3> <hr/> - <input type="text" id="demo-input-onadd-ondelete" name="blah" /> + <h3 id="onadd-ondelete">Item Add &amp; Delete Callbacks</h3> <hr/> + <p>Using onAdd and onDelete Callbacks</p> + <input type="text" id="demo-input-onadd-ondelete"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-onadd-ondelete").tokenInput(jsonArray, { @@ -218,12 +254,13 @@ <h3 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h3> <hr/> </div> <div class="section"> - <h3 id="plugin-methods">Using the add, remove, clear and toggleDisabled Methods</h3> <hr/> + <h3 id="programmatically-modify">Programmatically Modify Input</h3> <hr/> + <p>Using the add, remove, clear and toggleDisabled Methods</p> <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> | <a href="#" id="plugin-methods-toggle-disable">Toggle Disabled</a><br /> - <input type="text" id="demo-input-plugin-methods" name="blah" /> + <input type="text" id="demo-input-plugin-methods"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-plugin-methods").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php"); @@ -255,9 +292,10 @@ <h3 id="plugin-methods">Using the add, remove, clear and toggleDisabled Methods< </div> <div class="section"> - <h3>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter</h3> <hr/> - <p> Only search by first name </p> - <input type="text" id="demo-input-local-custom-formatters" name="blah" /> + <h3 id="custom-data-search">Custom Data Search</h3> <hr/> + <p>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter</p> + <p> This only searchs by first name </p> + <input type="text" id="demo-input-local-custom-formatters"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-local-custom-formatters").tokenInput([{ @@ -277,8 +315,10 @@ <h3>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFo </div> <div class="section"> - <h3>Change propertyToSearch anytime</h3> <hr/> - <input type="text" id="demo-input-change-propertytosearch-anytime" name="blah" /> + <h3 id="narrow-search">Narrow Search</h3> <hr/> + <p>Change property to search anytime</p> + <p>Format search and results </p> + <input type="text" id="demo-input-change-propertytosearch-anytime"/> Search by :<input type="radio" checked="checked" name="search_key" value="first_name" /> First Name <input type="radio" name="search_key" value="last_name" /> Last Name <input type="radio" name="search_key" value="email" /> Email @@ -318,8 +358,8 @@ <h3>Change propertyToSearch anytime</h3> <hr/> </div> <div class="section"> - <h3>Start disabled</h3> <hr/> - <input type="text" id="demo-input-disabled" name="blah" /> + <h3 id="start-disabled">Start Disabled</h3> <hr/> + <input type="text" id="demo-input-disabled"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-disabled").tokenInput(jsonArray, @@ -334,9 +374,9 @@ <h3>Start disabled</h3> <hr/> </div> <div class="section"> - <h3>Free Tagging</h3> <hr/> + <h3 id="free-tagging">Free Tagging</h3> <hr/> <p> Add items that do not already exist in list </p> - <input type="text" id="demo-input-free-tagging" name="blah" /> + <input type="text" id="demo-input-free-tagging"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-free-tagging").tokenInput(jsonArray, @@ -346,9 +386,9 @@ <h3>Free Tagging</h3> <hr/> </div> <div class="section"> - <h3>Exclude Current Tokens From Autocomplete</h3> <hr/> - <p> does not repeat selected tokens in search list </p> - <input type="text" id="demo-input-local-exclude" name="blah" /> + <h3 id="exclude-repetition">Exclude Repetition</h3> <hr/> + <p> Set to not repeat any already selected tokens in search list </p> + <input type="text" id="demo-input-local-exclude"/> <input type="button" value="Submit" /> <xmp class="example"> $("#demo-input-local-exclude").tokenInput(jsonArray, diff --git a/examples/demo.css b/examples/demo.css index be5e2e5f..2bb288db 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -1,10 +1,42 @@ 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 { - padding: 50px; - margin: 0 auto; + margin: 0 0 0 250px; + min-width: 500px; } .example { @@ -15,7 +47,7 @@ body { padding: 5px; background-color: #ffffe8; padding-bottom: 20px; - outline: 1px solid #ffffa1; + outline: 1px solid gray; } .section { diff --git a/examples/demo.js b/examples/demo.js index 5f91b649..17988986 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -5,7 +5,7 @@ $(document).ready(function() { alert("Would submit: " + $(this).siblings("input[type=text]").val()); }); - $("#basic-use").tokenInput(exampleList, { }); + $("#demo-input-basic-use").tokenInput(exampleList, { }); $("#demo-input-local").tokenInput(alphabetList); $("#demo-input").tokenInput(url, {}); $("#demo-input-facebook-theme").tokenInput(url, { From 8e839cfb7ad9a5d7ba6be9da7b93e8f49948c5e3 Mon Sep 17 00:00:00 2001 From: Beth Armitage <bethgrace5@gmail.com> Date: Sat, 4 Jul 2015 14:35:25 -0700 Subject: [PATCH 5/5] anchor links to div instead of heading --- demo.html | 76 +++++++++++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/demo.html b/demo.html index 612e9bf5..8010a4c4 100644 --- a/demo.html +++ b/demo.html @@ -46,8 +46,8 @@ <h1>jQuery Tokeninput Demos</h1> </div> - <div class="section"> - <h3 id="basic-use"> Basic Use </h3> <hr/> + <div id="basic-use" class="section"> + <h3> Basic Use </h3> <hr/> <p> Use a JSON array with an HTML input element to create a tokeninput</p> <input type="text" id="demo-input-basic-use" /> <input type="button" value="Submit" /> @@ -77,8 +77,8 @@ <h3 id="basic-use"> Basic Use </h3> <hr/>
    -
    -

    Local Search

    +
    +

    Local Search

    The JSON array may be included in the tokeninput upon initialization

    @@ -93,8 +93,8 @@

    Local Search

    -
    -

    Sever-Backed Search

    +
    +

    Sever-Backed Search

    The JSON array may be retrieved from a serer

    @@ -103,8 +103,8 @@

    Sever-Backed Search

    -
    -

    Theme

    +
    +

    Theme

    Customize theme - Facebook theme shown

    @@ -115,8 +115,8 @@

    Theme

    -
    -

    Labels

    +
    +

    Labels

    Customize search labels

    @@ -129,8 +129,8 @@

    Labels

    -
    -

    Custom Delete Icon

    +
    +

    Delete Icon

    @@ -139,8 +139,8 @@ <h3 id="custom-delete">Custom Delete Icon</h3> <hr/> });
    -
    -

    Pre-populated Field

    +
    +

    Pre-populated Field

    @@ -153,8 +153,8 @@ <h3 id="pre-populated">Pre-populated Field</h3> <hr/> });
    -
    -

    Token Limit

    +
    +

    Token Limit

    @@ -168,8 +168,8 @@ <h3 id="pre-populated-with-tokenlimit">Token Limit</h3> <hr/> });
    -
    -

    Delay & Start Limit

    +
    +

    Delay & Start Limit

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

    @@ -181,8 +181,8 @@

    Delay & Start Limit

    });
    -
    -

    Token Delimiter

    +
    +

    Token Delimiter

    Select two or more items, and click submit to preview

    @@ -193,8 +193,8 @@

    Token Delimiter

    -
    -

    Eliminate Duplicates

    +
    +

    Eliminate Duplicates

    Try to add two of the same items

    @@ -207,8 +207,8 @@

    Eliminate Duplicates

    -
    -

    Disable Animation

    +
    +

    Disable Animation

    Disable animation on dropdown

    @@ -219,8 +219,8 @@

    Disable Animation

    -
    -

    Result Modification

    +
    +

    Result Modification

    Modify Response with onResult Callback

    @@ -236,8 +236,8 @@

    Result Modification

    -
    -

    Item Add & Delete Callbacks

    +
    +

    Item Add & Delete Callbacks

    Using onAdd and onDelete Callbacks

    @@ -253,8 +253,8 @@

    Item Add & Delete Callbacks

    -
    -

    Programmatically Modify Input

    +
    +

    Programmatically Modify Input

    Using the add, remove, clear and toggleDisabled Methods

    Add Token | Remove Token | @@ -291,8 +291,8 @@

    Programmatically Modify Input

    -
    -
    + -
    -
    + -
    -

    Start Disabled

    +
    +

    Start Disabled

    @@ -373,8 +373,8 @@ <h3 id="start-disabled">Start Disabled</h3> <hr/>
    -
    -

    Free Tagging

    +
    +

    Free Tagging

    Add items that do not already exist in list