Allow the user to add new items by simply writing them and hitting enter/comma

src/jquery.tokeninput.js

@@ -29,7 +29,9 @@ var DEFAULT_SETTINGS = {
     animateDropdown: true,
     onResult: null,
     onAdd: null,
-    onDelete: null
+    onDelete: null,
+    allowNewItems: false,
+    newItemFilter: null
 };
 
 // Default classes to use when theming
@@ -217,8 +219,26 @@ $.TokenList = function (input, url_or_data, settings) {
                 case KEY.COMMA:
                   if(selected_dropdown_item) {
                     add_token($(selected_dropdown_item));
+
+                    return false;
+                  } else if (settings.allowNewItems) {
+                    var new_item_name = $(this).val();
+
+                    if (new_item_name.length > 0) {
+                      if (typeof(settings.newItemFilter) === "function") {
+                        var addItem = function (name) {
+                          _add_token(name, name);
+                        };
+
+                        settings.newItemFilter(addItem, new_item_name);
+                      } else {
+                        _add_token(new_item_name, new_item_name);
+                      }
+                    }
+
                     return false;
                   }
+
                   break;
 
                 case KEY.ESCAPE:
@@ -227,8 +247,10 @@ $.TokenList = function (input, url_or_data, settings) {
 
                 default:
                     if(String.fromCharCode(event.which)) {
-                        // set a timeout just long enough to let this function finish.
-                        setTimeout(function(){do_search();}, 5);
+                        if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
+                            // set a timeout just long enough to let this function finish.
+                            setTimeout(function(){do_search();}, 5);
+                        }
                     }
                     break;
             }
@@ -373,12 +395,24 @@ $.TokenList = function (input, url_or_data, settings) {
 
         token_count += 1;
 
+        // Check the token limit
+        if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
+            input_box.hide();
+            hide_dropdown();
+        }
+
         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 token_data = $.data(item.get(0), "tokeninput")
+        _add_token(token_data.id, token_data.name);
+    }
+
+    // Add a token to the token list with the id and name passed as args
+    function _add_token (id, name) {
+        var li_data = {id: id, name: name};
         var callback = settings.onAdd;
 
         // See if the token already exists and select it if we don't want duplicates
@@ -407,15 +441,12 @@ $.TokenList = function (input, url_or_data, settings) {
         // Check the token limit
         if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) {
             input_box.hide();
-            hide_dropdown();
-            return;
         } else {
             input_box.focus();
+            // Clear input box
+            input_box.val("");
         }
 
-        // Clear input box
-        input_box.val("");
-
         // Don't show the help dropdown, they've got the idea
         hide_dropdown();
 
@@ -546,7 +577,8 @@ $.TokenList = function (input, url_or_data, settings) {
 
     // Highlight the query part of the search term
     function highlight_term(value, term) {
-        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
+        var escaped = term.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + escaped + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
     }
 
     // Populate the results dropdown with some results
@@ -574,8 +606,12 @@ $.TokenList = function (input, url_or_data, settings) {
                     this_li.addClass(settings.classes.dropdownItem2);
                 }
 
-                if(index === 0) {
-                    select_dropdown_item(this_li);
+                // Select the first item, unless we allow the user to add new
+                // items.
+                if (settings.allowNewItems === false) {
+                    if(index === 0) {
+                        select_dropdown_item(this_li);
+                    }
                 }
 
                 $.data(this_li.get(0), "tokeninput", {"id": value.id, "name": value.name});