diff --git a/examples/demo.html b/examples/demo.html new file mode 100644 index 00000000..3d56d1b1 --- /dev/null +++ b/examples/demo.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + +

Jquery Tokenizing Autocomplete Input

+ +
+

List style

+ +
+ +
+

Facebook style

+ +
+ + diff --git a/examples/php-example.php b/examples/php-example.php new file mode 100644 index 00000000..7c572ffc --- /dev/null +++ b/examples/php-example.php @@ -0,0 +1,15 @@ + diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js new file mode 100644 index 00000000..11d66861 --- /dev/null +++ b/src/jquery.tokeninput.js @@ -0,0 +1,490 @@ +(function($) { + +$.fn.tokenInput = function (url, options) { + var settings = $.extend({ + url: url, + hintText: "Type in a search term", + noResultsText: "No results", + searchingText: "Searching...", + searchDelay: 300 + }, options); + + settings.classes = $.extend({ + tokenList: "token-input-list", + token: "token-input-token", + tokenDelete: "token-input-delete-token", + selectedToken: "token-input-selected-token", + highlightedToken: "token-input-highlighted-token", + dropdown: "token-input-dropdown", + dropdownItem: "token-input-dropdown-item", + dropdownItem2: "token-input-dropdown-item2", + selectedDropdownItem: "token-input-selected-dropdown-item", + inputToken: "token-input-input-token" + }, options.classes); + + return this.each(function () { + var list = new $.TokenList(this, settings); + }); +}; + +$.TokenList = function (input, settings) { + // + // Variables + // + + // Input box position "enum" + var POSITION = { + BEFORE: 0, + AFTER: 1, + END: 2 + }; + + // Keys "enum" + var KEY = { + BACKSPACE: 8, + RETURN: 13, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 + }; + + // 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 = $("") + .css({ + outline: "none" + }) + .focus(function () { + show_dropdown_hint(); + }) + .blur(function () { + if(!selected_dropdown_item) { + hide_dropdown(); + } + }) + .keydown(function (event) { + var previous_token; + var next_token; + + switch(event.keyCode) { + case KEY.LEFT: + case KEY.RIGHT: + case KEY.UP: + case KEY.DOWN: + 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) { + deselect_token($(selected_token), POSITION.BEFORE); + } else { + deselect_token($(selected_token), POSITION.AFTER); + } + } else if((event.keyCode == KEY.LEFT || event.keyCode == KEY.UP) && previous_token.length) { + // We are moving left, select the previous token if it exists + select_token($(previous_token.get(0))); + } else if((event.keyCode == KEY.RIGHT || event.keyCode == KEY.DOWN) && next_token.length) { + // We are moving right, select the next token if it exists + select_token($(next_token.get(0))); + } + } else { + var dropdown_item = null; + + if(event.keyCode == KEY.DOWN || event.keyCode == KEY.RIGHT) { + dropdown_item = $(selected_dropdown_item).next(); + } else { + dropdown_item = $(selected_dropdown_item).prev(); + } + + if(dropdown_item.length) { + select_dropdown_item(dropdown_item); + } + return false; + } + break; + + case KEY.BACKSPACE: + previous_token = input_token.prev(); + + if(!$(this).val().length) { + if(selected_token) { + delete_token($(selected_token)); + } 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); + } + break; + + case KEY.RETURN: + if(selected_dropdown_item) { + add_token($(selected_dropdown_item)); + return false; + } + break; + + default: + if(is_printable_character(event.keyCode)) { + show_dropdown_searching(); + clearTimeout(timeout); + timeout = setTimeout(do_search, settings.searchDelay); + } + + break; + } + }); + + // Keep a reference to the original input box + var hidden_input = $(input) + .hide() + .focus(function () { + input_box.focus(); + }) + .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 = $("