") .addClass(settings.classes.dropdown) .appendTo("body") .hide(); // Magic element to help us resize the text input var input_resizer = $("") .insertAfter(input_box) .css({ position: "absolute", top: -9999, left: -9999, width: "auto", fontSize: input_box.css("fontSize"), fontFamily: input_box.css("fontFamily"), fontWeight: input_box.css("fontWeight"), letterSpacing: input_box.css("letterSpacing"), whiteSpace: "nowrap" }); // Pre-populate list if items exist hidden_input.val(""); var li_data = settings.prePopulate || hidden_input.data("pre"); if(settings.processPrePopulate && $.isFunction(settings.onResult)) { li_data = settings.onResult.call(hidden_input, li_data); } if(li_data && li_data.length) { $.each(li_data, function (index, value) { insert_token(value); checkTokenLimit(); }); } // Initialization is done if($.isFunction(settings.onReady)) { settings.onReady.call(); } // // Public functions // this.clear = function() { token_list.children("li").each(function() { if ($(this).children("input").length === 0) { delete_token($(this)); } }); } this.add = function(item) { add_token(item); } this.remove = function(item) { token_list.children("li").each(function() { if ($(this).children("input").length === 0) { var currToken = $(this).data("tokeninput"); var match = true; for (var prop in item) { if (item[prop] !== currToken[prop]) { match = false; break; } } if (match) { delete_token($(this)); } } }); } this.getTokens = function() { return saved_tokens; } // // Private functions // function checkTokenLimit() { if(settings.tokenLimit !== null && token_count >= settings.tokenLimit) { input_box.hide(); hide_dropdown(); return; } } function resize_input() { if(input_val === (input_val = input_box.val())) {return;} // Enter new content into resizer and resize input accordingly var escaped = input_val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>'); input_resizer.html(escaped); input_box.width(input_resizer.width() + 30); } function is_printable_character(keycode) { return ((keycode >= 48 && keycode <= 90) || // 0-1a-z (keycode >= 96 && keycode <= 111) || // numpad 0-9 + - / * . (keycode >= 186 && keycode <= 192) || // ; = , - . / ^ (keycode >= 219 && keycode <= 222)); // ( \ ) ' } // Inner function to a token to the list function insert_token(item) { var this_token = settings.tokenFormatter(item); this_token = $(this_token) .addClass(settings.classes.token) .insertBefore(input_token); // The 'delete token' button $("" + settings.deleteText + "") .addClass(settings.classes.tokenDelete) .appendTo(this_token) .click(function () { delete_token($(this).parent()); hidden_input.change(); return false; }); // Store data on the token var token_data = {"id": item.id}; token_data[settings.propertyToSearch] = item[settings.propertyToSearch]; $.data(this_token.get(0), "tokeninput", item); // Save this token for duplicate checking saved_tokens = saved_tokens.slice(0,selected_token_index).concat([token_data]).concat(saved_tokens.slice(selected_token_index)); selected_token_index++; // Update the hidden input update_hidden_input(saved_tokens, hidden_input); 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 callback = settings.onAdd; // See if the token already exists and select it if we don't want duplicates if(token_count > 0 && settings.preventDuplicates) { var found_existing_token = null; token_list.children().each(function () { var existing_token = $(this); var existing_data = $.data(existing_token.get(0), "tokeninput"); if(existing_data && existing_data.id === item.id) { found_existing_token = existing_token; return false; } }); if(found_existing_token) { select_token(found_existing_token); input_token.insertAfter(found_existing_token); input_box.focus(); return; } } // Insert the new tokens if(settings.tokenLimit == null || token_count < settings.tokenLimit) { insert_token(item); checkTokenLimit(); } // Clear input box input_box.val(""); // Don't show the help dropdown, they've got the idea hide_dropdown(); // Execute the onAdd callback if defined if($.isFunction(callback)) { callback.call(hidden_input,item); } } // Select a token in the token list function select_token (token) { token.addClass(settings.classes.selectedToken); selected_token = token.get(0); // Hide input box input_box.val(""); // Hide dropdown if it is visible (eg if we clicked to select token) hide_dropdown(); } // Deselect a token in the token list function deselect_token (token, position) { token.removeClass(settings.classes.selectedToken); selected_token = null; if(position === POSITION.BEFORE) { input_token.insertBefore(token); selected_token_index--; } else if(position === POSITION.AFTER) { input_token.insertAfter(token); selected_token_index++; } else { input_token.appendTo(token_list); selected_token_index = token_count; } // 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) { var previous_selected_token = selected_token; if(selected_token) { deselect_token($(selected_token), POSITION.END); } if(previous_selected_token === token.get(0)) { deselect_token(token, POSITION.END); } else { 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"); var callback = settings.onDelete; var index = token.prevAll().length; if(index > selected_token_index) index--; // Delete the token token.remove(); selected_token = null; // Show the input box and give it focus again input_box.focus(); // Remove this token from the saved list saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1)); if(index < selected_token_index) selected_token_index--; // Update the hidden input update_hidden_input(saved_tokens, hidden_input); token_count -= 1; if(settings.tokenLimit !== null) { input_box .show() .val("") .focus(); } // Execute the onDelete callback if defined if($.isFunction(callback)) { callback.call(hidden_input,token_data); } } // Update the hidden input box value function update_hidden_input(saved_tokens, hidden_input) { var token_values = $.map(saved_tokens, function (el) { return el[settings.tokenValue]; }); hidden_input.val(token_values.join(settings.tokenDelimiter)); } // Hide and clear the results dropdown function hide_dropdown () { dropdown.hide().empty(); selected_dropdown_item = null; } function show_dropdown() { dropdown .css({ position: "absolute", top: $(token_list).offset().top + $(token_list).outerHeight(), left: $(token_list).offset().left, zindex: 999 }) .show(); } function show_dropdown_searching () { if(settings.searchingText) { dropdown.html("

"+settings.searchingText+"

"); show_dropdown(); } } function show_dropdown_hint () { if(settings.hintText) { dropdown.html("

"+settings.hintText+"

"); show_dropdown(); } } // Highlight the query part of the search term function highlight_term(value, term) { return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1"); } function find_value_and_highlight_term(template, value, term) { return template.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + value + ")(?![^<>]*>)(?![^&;]+;)", "g"), highlight_term(value, term)); } // Populate the results dropdown with some results function populate_dropdown (query, results) { if(results && results.length) { dropdown.empty(); var dropdown_ul = $("

"+settings.noResultsText+"