Merge branch 'vdep'

arrbee · Jul 29, 2011 · d653b36 · d653b36
2 parents e3501ad + aaa32ec
commit d653b36
Show file tree

Hide file tree

Showing 8 changed files with 779 additions and 116 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 _site
 _layouts
-.DS_Store
+.DS_Store
+*~
+\#*#
diff --git a/README.md b/README.md
@@ -5,8 +5,24 @@ Overview
 --------
 Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.
 
-Documentation, Features and Demos
----------------------------------
-Full details and documentation can be found on the project page here:
+Changes from original jquery-tokeninput
+---------------------------------------
+
+This is a forked version of jquery-tokeninput blending the latest versions of vdepizzol's and loopj's versions, plus updating the search-by-function behavior to actually work and to be similar to JQuery UI Autocomplete's behavior.
+
+In this version, in addition to having all of the latest features of both loopj's 1.5 version and vdepizzol's improvements, the main change is that in addition to providing a URL or inline data for the first parameter, you can provide a search function to handle the lookups for you.  This function can construct whatever type of request you like, such as:
+
+  $("#element").tokenInput(
+    function(query, response) {
+      $.ajax({ url: "your url here",
+               data: { q: query, extra: "stuff" },
+               dataType: "json",
+               success: function(data) { response(data) }
+             });
+    },
+    {
+      preventDuplicates: true,
+      onAdd: function(list,item) { alert("You added " + item.name) }
+    });
+
 
-<http://loopj.com/jquery-tokeninput/>
diff --git a/demo.html b/demo.html
@@ -1,5 +1,7 @@
 <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>
 
@@ -69,6 +71,21 @@ <h2 id="theme">Facebook Theme</h2>
     </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" />
@@ -212,8 +229,65 @@ <h2 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h2>
         });
         </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 />
@@ -244,4 +318,4 @@ <h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
         </script>
     </div>
 </body>
-</html>
+</html>
diff --git a/demo_tabindex.html b/demo_tabindex.html
@@ -0,0 +1,53 @@
+<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>Tab index demo</h2>
+    <div>
+        <input type="text" tabindex="1" value="index 1"/>
+        <input type="text" tabindex="2" value="index 2" />
+        <input type="text" id="demo-input1" name="blah" tabindex="3" />
+        <input type="text" tabindex="4" value="index 4" />
+        <input type="button" value="Submit" tabindex="5" />
+        <script type="text/javascript">
+        $(document).ready(function() {
+            $("#demo-input1").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
+        });
+        </script>
+    </div>
+
+    <h2>Tab index demo in a form</h2>
+    <div>
+        <form>
+            <input type="text" tabindex="6" value="index 6"/>
+            <input type="text" tabindex="7" value="index 7" />
+            <input type="text" id="demo-input2" name="blah" tabindex="8" />
+            <input type="text" tabindex="9" value="index 9" />
+            <input type="button" value="Submit" tabindex="10" />
+        </form>
+        <script type="text/javascript">
+        $(document).ready(function() {
+            $("#demo-input2").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
+        });
+        </script>
+    </div>
+</body>
+</html>