From caac2b3c474958b37c3226076bb4895a2dccfa9e Mon Sep 17 00:00:00 2001
From: James Smith <james@loopj.com>
Date: Sat, 11 Jul 2009 16:55:02 -0700
Subject: [PATCH] Updated the plugin to version 1.1, contains many fixes
 suggested in comments, thanks guys\!

---
 src/jquery.tokeninput.js | 245 ++++++++++++++++++++++++++-------------
 1 file changed, 162 insertions(+), 83 deletions(-)

diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js
index 11d66861..7971a71a 100644
--- a/src/jquery.tokeninput.js
+++ b/src/jquery.tokeninput.js
@@ -1,3 +1,13 @@
+/*
+ * jQuery Plugin: Tokenizing Autocomplete Text Entry
+ * Version 1.1
+ *
+ * Copyright (c) 2009 James Smith (http://loopj.com)
+ * Licensed jointly under the GPL and MIT licenses,
+ * choose which one suits your project best!
+ *
+ */
+
 (function($) {
 
 $.fn.tokenInput = function (url, options) {
@@ -6,7 +16,9 @@ $.fn.tokenInput = function (url, options) {
         hintText: "Type in a search term",
         noResultsText: "No results",
         searchingText: "Searching...",
-        searchDelay: 300
+        searchDelay: 300,
+        minChars: 1,
+        method: "GET"
     }, options);
 
     settings.classes = $.extend({
@@ -38,26 +50,29 @@ $.TokenList = function (input, settings) {
         AFTER: 1,
         END: 2
     };
-    
+
     // Keys "enum"
     var KEY = {
         BACKSPACE: 8,
+        TAB: 9,
         RETURN: 13,
+        ESC: 27,
         LEFT: 37,
         UP: 38,
         RIGHT: 39,
-        DOWN: 40
+        DOWN: 40,
+        COMMA: 188
     };
-    
+
     // Save the tokens
     var saved_tokens = [];
-    
+
     // Basic cache to save on db hits
     var cache = new $.TokenList.Cache();
 
     // Keep track of the timeout
     var timeout;
-    
+
     // Create a new text input an attach keyup events
     var input_box = $("<input type=\"text\">")
         .css({
@@ -67,9 +82,7 @@ $.TokenList = function (input, settings) {
             show_dropdown_hint();
         })
         .blur(function () {
-            if(!selected_dropdown_item) {
-                hide_dropdown();
-            }
+            hide_dropdown();
         })
         .keydown(function (event) {
             var previous_token;
@@ -83,7 +96,7 @@ $.TokenList = function (input, settings) {
                     if(!$(this).val()) {
                         previous_token = input_token.prev();
                         next_token = input_token.next();
-                        
+
                         if((previous_token.length && previous_token.get(0) === selected_token) || (next_token.length && next_token.get(0) === selected_token)) {
                             // Check if there is a previous/next token and it is selected
                             if(event.keyCode == KEY.LEFT || event.keyCode == KEY.UP) {
@@ -103,8 +116,8 @@ $.TokenList = function (input, settings) {
 
                         if(event.keyCode == KEY.DOWN || event.keyCode == KEY.RIGHT) {
                             dropdown_item = $(selected_dropdown_item).next();
-                        } else { 
-                            dropdown_item = $(selected_dropdown_item).prev();                
+                        } else {
+                            dropdown_item = $(selected_dropdown_item).prev();
                         }
 
                         if(dropdown_item.length) {
@@ -113,7 +126,7 @@ $.TokenList = function (input, settings) {
                         return false;
                     }
                     break;
-                
+
                 case KEY.BACKSPACE:
                     previous_token = input_token.prev();
 
@@ -123,30 +136,34 @@ $.TokenList = function (input, settings) {
                         } else if(previous_token.length) {
                             select_token($(previous_token.get(0)));
                         }
-                        
+
                         return false;
                     } else if($(this).val().length == 1) {
                         hide_dropdown();
                     } else {
-                        show_dropdown_searching();
-                        do_search(1);
+                        // set a timeout just long enough to let this function finish.
+                        setTimeout(function(){do_search(false);}, 5);
                     }
                     break;
 
+                case KEY.TAB:
                 case KEY.RETURN:
-                    if(selected_dropdown_item) {
-                        add_token($(selected_dropdown_item));
-                        return false;
-                    }
-                    break;
+                case KEY.COMMA:
+                  if(selected_dropdown_item) {
+                    add_token($(selected_dropdown_item));
+                    return false;
+                  }
+                  break;
+
+                case KEY.ESC:
+                  hide_dropdown();
+                  return true;
 
                 default:
                     if(is_printable_character(event.keyCode)) {
-                        show_dropdown_searching();
-                        clearTimeout(timeout);
-    				    timeout = setTimeout(do_search, settings.searchDelay);
-				    }
-				    
+                      // set a timeout just long enough to let this function finish.
+                      setTimeout(function(){do_search(false);}, 5);
+                    }
                     break;
             }
         });
@@ -159,13 +176,12 @@ $.TokenList = function (input, settings) {
                            })
                            .blur(function () {
                                input_box.blur();
-                           })
-                           .val("");
+                           });
 
     // Keep a reference to the selected token and dropdown item
     var selected_token = null;
     var selected_dropdown_item = null;
-    
+
     // The list to store the token items in
     var token_list = $("<ul />")
         .addClass(settings.classes.tokenList)
@@ -177,7 +193,7 @@ $.TokenList = function (input, settings) {
                 return false;
             } else {
                 input_box.focus();
-            
+
                 if(selected_token) {
                     deselect_token($(selected_token), POSITION.END);
                 }
@@ -209,17 +225,55 @@ $.TokenList = function (input, settings) {
         .addClass(settings.classes.dropdown)
         .insertAfter(token_list)
         .hide();
-    
+
     // The token holding the input box
     var input_token = $("<li />")
         .addClass(settings.classes.inputToken)
         .appendTo(token_list)
         .append(input_box);
 
+    init_list();
+
     //
     // Functions
     //
 
+
+    //pre-populate list if items exist
+    function init_list () {
+        li_data = settings.prePopulate;
+        if(li_data && li_data.length) {
+            for(var i in li_data) {
+
+            var this_token = $("<li><p>"+li_data[i].name+"</p> </li>")
+                .addClass(settings.classes.token)
+                .insertBefore(input_token);
+
+            $("<span>x</span>")
+                .addClass(settings.classes.tokenDelete)
+                .appendTo(this_token)
+                .click(function () {
+                    delete_token($(this).parent());
+                    return false;
+                });
+
+            $.data(this_token.get(0), "tokeninput", {"id": li_data[i].id, "name": li_data[i].name});
+
+            // Clear input box and make sure it keeps focus
+            input_box
+                .val("")
+                .focus();
+
+            // Don't show the help dropdown, they've got the idea
+            hide_dropdown();
+
+            // Save this token id
+            var id_string = li_data[i].id + ","
+            hidden_input.val(hidden_input.val() + id_string);
+            }
+        }
+    }
+
     function is_printable_character(keycode) {
         if((keycode >= 48 && keycode <= 90) ||      // 0-1a-z
            (keycode >= 96 && keycode <= 111) ||     // numpad 0-9 + - / * .
@@ -245,29 +299,37 @@ $.TokenList = function (input, settings) {
 
         return element;
     }
-    
-    // Add a token to the token list
+
+    // Inner function to a token to the list
+    function insert_token(id, value) {
+      var this_token = $("<li><p>"+ value +"</p> </li>")
+      .addClass(settings.classes.token)
+      .insertBefore(input_token);
+
+      // The 'delete token' button
+      $("<span>x</span>")
+          .addClass(settings.classes.tokenDelete)
+          .appendTo(this_token)
+          .click(function () {
+              delete_token($(this).parent());
+              return false;
+          });
+
+      $.data(this_token.get(0), "tokeninput", {"id": id, "name": value});
+
+      return this_token;
+    }
+
+    // Add a token to the token list based on user input
     function add_token (item) {
         var li_data = $.data(item.get(0), "tokeninput");
-        var this_token = $("<li><p>"+ li_data.name +"</p> </li>")
-            .addClass(settings.classes.token)
-            .insertBefore(input_token);
-             
-        $("<span>x</span>")
-            .addClass(settings.classes.tokenDelete)
-            .appendTo(this_token)
-            .click(function () {
-                delete_token($(this).parent());
-                return false;
-            });
-        
-        $.data(this_token.get(0), "tokeninput", {"id": li_data.id, "name": li_data.name});
+        var this_token = insert_token(li_data.id, li_data.name);
 
         // Clear input box and make sure it keeps focus
         input_box
             .val("")
-            .focus();        
-        
+            .focus();
+
         // Don't show the help dropdown, they've got the idea
         hide_dropdown();
 
@@ -283,7 +345,7 @@ $.TokenList = function (input, settings) {
 
         // Hide input box
         input_box.val("");
-        
+
         // Hide dropdown if it is visible (eg if we clicked to select token)
         hide_dropdown();
     }
@@ -304,7 +366,7 @@ $.TokenList = function (input, settings) {
         // Show the input box and give it focus again
         input_box.focus();
     }
-    
+
     // Toggle selection of a token in the token list
     function toggle_select_token (token) {
         if(selected_token == token.get(0)) {
@@ -316,12 +378,11 @@ $.TokenList = function (input, settings) {
             select_token(token);
         }
     }
-    
+
     // Delete a token from the token list
     function delete_token (token) {
         // Remove the id from the saved list
         var token_data = $.data(token.get(0), "tokeninput");
-        //saved_tokens.splice($.inArray(saved_tokens, token_data.id), 1);
 
         // Delete the token
         token.remove();
@@ -347,13 +408,13 @@ $.TokenList = function (input, settings) {
         dropdown.hide().empty();
         selected_dropdown_item = null;
     }
-    
+
     function show_dropdown_searching () {
         dropdown
             .html("<p>"+settings.searchingText+"</p>")
             .show();
     }
-    
+
     function show_dropdown_hint () {
         dropdown
             .html("<p>"+settings.hintText+"</p>")
@@ -362,7 +423,7 @@ $.TokenList = function (input, settings) {
 
     // Highlight the query part of the search term
 	function highlight_term(value, term) {
-		return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<em>$1</em>");
+		return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
 	}
 
     // Populate the results dropdown with some results
@@ -382,22 +443,22 @@ $.TokenList = function (input, settings) {
                     return false;
                 })
                 .hide();
-        
+
             for(var i in results) {
                 if (results.hasOwnProperty(i)) {
                     var this_li = $("<li>"+highlight_term(results[i].name, query)+"</li>")
                                       .appendTo(dropdown_ul);
-                
+
                     if(i%2) {
                         this_li.addClass(settings.classes.dropdownItem);
                     } else {
                         this_li.addClass(settings.classes.dropdownItem2);
                     }
-                
+
                     if(i == 0) {
                         select_dropdown_item(this_li);
                     }
-        
+
                     $.data(this_li.get(0), "tokeninput", {"id": results[i].id, "name": results[i].name});
                 }
             }
@@ -411,57 +472,75 @@ $.TokenList = function (input, settings) {
                 .show();
         }
     }
-    
+
     // Highlight an item in the results dropdown
     function select_dropdown_item (item) {
         if(item) {
             if(selected_dropdown_item) {
                 deselect_dropdown_item($(selected_dropdown_item));
             }
-        
+
             item.addClass(settings.classes.selectedDropdownItem);
             selected_dropdown_item = item.get(0);
         }
     }
-    
+
     // Remove highlighting from an item in the results dropdown
     function deselect_dropdown_item (item) {
         item.removeClass(settings.classes.selectedDropdownItem);
         selected_dropdown_item = null;
     }
 
-    // Do a search
-    function do_search(trim_last_char) {
+    // Do a search and show the "searching" dropdown if the input is longer
+    // than settings.minChars
+    function do_search(immediate) {
         var query = input_box.val().toLowerCase();
-        
-        if(trim_last_char == 1) {
-            query = query.substring(0, query.length-1);
-        }
 
-        if(query && query.length) {
+        if (query && query.length) {
             if(selected_token) {
                 deselect_token($(selected_token), POSITION.AFTER);
             }
-            
-            var cached_results = cache.get(query);
-            if(cached_results) {
-                populate_dropdown(query, cached_results);
+            if (query.length >= settings.minChars) {
+                show_dropdown_searching();
+                if (immediate) {
+                    run_search(query);
+                } else {
+                    clearTimeout(timeout);
+                    timeout = setTimeout(function(){run_search(query);}, settings.searchDelay);
+                }
             } else {
-                $.get(settings.url, {"q": query }, function (results) {
-                    cache.add(query, results);
-                    populate_dropdown(query, results);
-                }, "json");
+                hide_dropdown();
             }
         }
     }
+
+    // Do the actual search
+    function run_search(query) {
+        var cached_results = cache.get(query);
+        if(cached_results) {
+            populate_dropdown(query, cached_results);
+        } else {
+			var queryStringDelimiter = settings.url.indexOf("?") < 0 ? "?" : "&";
+			var callback = function(results) {
+              cache.add(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
+              populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
+            };
+            
+            if(settings.method == "POST") {
+			    $.post(settings.url + queryStringDelimiter + "q=" + query, {}, callback, "json");
+		    } else {
+		        $.get(settings.url + queryStringDelimiter + "q=" + query, {}, callback, "json");
+		    }
+        }
+    }
 };
 
 // Really basic cache for the results
 $.TokenList.Cache = function (options) {
     var settings = $.extend({
-        max_size: 10
+        max_size: 50
     }, options);
-    
+
     var data = {};
     var size = 0;
 
@@ -474,17 +553,17 @@ $.TokenList.Cache = function (options) {
         if(size > settings.max_size) {
             flush();
         }
-        
+
         if(!data[query]) {
             size++;
         }
-        
+
         data[query] = results;
     };
-    
+
     this.get = function (query) {
         return data[query];
     };
 };
 
-})(jQuery);
+})(jQuery);
\ No newline at end of file