(function ($) { var DEFAULT_SETTINGS = { // Search settings method: "POST", contentType: "json", queryParam: "name", searchDelay: 300, minChars: 1, propertyToSearch: "name", jsonContainer: null, resultMaxHeight:"300px", // Display settings hintText: "", noResultsText: "", searchingText: "", deleteText: "×", animateDropdown: true, displayClass:"token-display-p", //是否单选 isSingle:false, isClickDropDown:false, // Tokenization settings tokenLimit: null, tokenDelimiter: ",", //id相同的记录是否只能添加一次 preventDuplicates: true, // Output settings tokenValue: "id", // Prepopulation settings prePopulate: null, processPrePopulate: false, // Manipulation settings idPrefix: "token-input-", // Formatters resultsFormatter: function(item){ return '
  • ' + item[this.propertyToSearch]+ '
  • ' }, tokenFormatter: function(item) { return '
  • ' + item[this.propertyToSearch] + '

  • ' }, // Callbacks onResult: null, onAdd: null, onDelete: null, onReady: null }; // Default classes to use when theming var DEFAULT_CLASSES = { 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" }; // Input box position "enum" var POSITION = { BEFORE: 0, AFTER: 1, END: 2 }; // Keys "enum" var KEY = { BACKSPACE: 8, TAB: 9, ENTER: 13, ESCAPE: 27, SPACE: 32, PAGE_UP: 33, PAGE_DOWN: 34, END: 35, HOME: 36, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, NUMPAD_ENTER: 108, COMMA: 188 }; // Additional public (exposed) methods var methods = { init: function(url_or_data_or_function, options) { var settings = $.extend({}, DEFAULT_SETTINGS, options || {}); return this.each(function () { $(this).data("tokenInputObject", new $.TokenList(this, url_or_data_or_function, settings)); }); }, clear: function() { this.data("tokenInputObject").clear(); return this; }, add: function(item) { this.data("tokenInputObject").add(item); return this; }, remove: function(item) { this.data("tokenInputObject").remove(item); return this; }, get: function() { return this.data("tokenInputObject").getTokens(); }, clearOnly:function(){ this.data("tokenInputObject").clearOnly(); return this; } } // Expose the .tokenInput function to jQuery as a plugin $.fn.tokenInput = function (method) { // Method calling and initialization logic if(methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else { return methods.init.apply(this, arguments); } }; // TokenList class for each input $.TokenList = function (input, url_or_data, settings) { // // Initialization // // Configure the data source if($.type(url_or_data) === "string" || $.type(url_or_data) === "function") { // Set the url to query against settings.url = url_or_data; // If the URL is a function, evaluate it here to do our initalization work var url = computeURL(); // Make a smart guess about cross-domain if it wasn't explicitly specified if(settings.crossDomain === undefined) { if(url.indexOf("://") === -1) { settings.crossDomain = false; } else { settings.crossDomain = (location.href.split(/\/+/g)[1] !== url.split(/\/+/g)[1]); } } } else if(typeof(url_or_data) === "object") { // Set the local data to search through settings.local_data = url_or_data; } // Build class names if(settings.classes) { // Use custom class names settings.classes = $.extend({}, DEFAULT_CLASSES, settings.classes); } else if(settings.theme) { // Use theme-suffixed default class names settings.classes = {}; $.each(DEFAULT_CLASSES, function(key, value) { settings.classes[key] = value + "-" + settings.theme; }); } else { settings.classes = DEFAULT_CLASSES; } // Save the tokens var saved_tokens = []; // Keep track of the number of tokens in the list var token_count = 0; // Basic cache to save on db hits var cache = new $.TokenList.Cache(); // Keep track of the timeout, old vals var timeout; var input_val; // Create a new text input an attach keyup events var input_box = $("") .css({ outline: "none" }) .attr("id", settings.idPrefix + input.id) .focus(function () { if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { show_dropdown_hint(); } }) .blur(function () { setTimeout(function(){ if(!settings.isClickDropDown){ hide_dropdown(); } settings.isClickDropDown = false; },5); $(this).val(""); }) .bind("keyup keydown blur update", resize_input) .keyup(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)); hidden_input.change(); } else if(previous_token.length) { select_token($(previous_token.get(0))); } return false; } else if($(this).val().length === 1) { hide_dropdown(); } else { // set a timeout just long enough to let this function finish. setTimeout(function(){do_search();}, 5); } break; case KEY.TAB: case KEY.ENTER: if(selected_dropdown_item) { var item = $(selected_dropdown_item).data("tokeninput"); if(!item){ setTimeout(function(){do_search();}, 5); return false; } add_token(item); hidden_input.change(); return false; } if(String.fromCharCode(event.which)) { // set a timeout just long enough to let this function finish. setTimeout(function(){do_search();}, 5); } break; case KEY.NUMPAD_ENTER: case KEY.COMMA: if(selected_dropdown_item) { var item = $(selected_dropdown_item).data("tokeninput"); if(!item)return false; add_token(item); hidden_input.change(); return false; } break; case KEY.ESCAPE: hide_dropdown(); return true; } }); // Keep a reference to the original input box var hidden_input = $(input) .hide() .focus(function () { input_box.focus(); }) .blur(function () { input_box.blur(); }); // Keep a reference to the selected token and dropdown item var selected_token = null; var selected_token_index = 0; var selected_dropdown_item = null; // The list to store the token items in var token_list = $("