基于 jQuery 的下拉列表带输入快速查找及结果分页展示的多功能选择器

/** * @summary SelectPage * @desc Simple and powerful selection plugin * @file selectpage.js * @version 2.19 * @author TerryZeng * @contact https://terryz.github.io/ * @license MIT License * */ ;(function($){ "use strict"; /** * Default options */ var defaults = { /** * Data source * @type {string|Object} * * string：server side request url address * Object：JSON array，format：[{a:1,b:2,c:3},{...}] */ data: undefined, /** * Language ('cn', 'en', 'ja', 'es', 'pt-br') * @type string * @default 'cn' */ lang: 'cn', /** * Multiple select mode(tags) * @type boolean * @default false */ multiple: false, /** * pagination or not * @type boolean * @default true */ pagination: true, /** * Show up menu button * @type boolean * @default true */ dropButton: true, /** * Result list visible size in pagination bar close * @type number * @default 10 */ listSize : 10, /** * Show control bar in multiple select mode * @type boolean * @default true */ multipleControlbar: true, /** * Max selected item limited in multiple select mode * @type number * @default 0(unlimited) */ maxSelectLimit: 0, /** * Select result item to close list, work on multiple select mode * @type boolean * @default false */ selectToCloseList: false, /** * Init selected item key, the result will match to option.keyField option * @type string */ initRecord: undefined, /** * The table parameter in server side mode * @type string */ dbTable: 'tbl', /** * The value field, the value will fill to hidden element * @type string * @default 'id' */ keyField: 'id', /** * The show text field, the text will show to input element or tags(multiple mode) * @type string * @default 'name' */ showField: 'name', /** * Actually used to search field * @type string */ searchField : undefined, /** * Search type ('AND' or 'OR') * @type string * @default 'AND' */ andOr: 'AND', /** * Result sort type * @type array|boolean * @example * orderBy : ['id desc'] */ orderBy: false, /** * Page size * @type number * @default 10 */ pageSize: 10, /** * Server side request parameters * @type function * @return object * @example params : function(){return {'name':'aa','sex':1};} */ params : undefined, /** * Custom result list item show text * @type function * @param data {object} row data * @return string */ formatItem : undefined, /** * Have some highlight item and lost focus, auto select the highlight item * @type boolean * @default false */ autoFillResult: false, /** * Auto select first item in show up result list or search result * depend on `autoFillResult` option set to true * @type boolean * @default false */ autoSelectFirst: false, /** * Whether clear input element text when enter some keywords to search and no result return * @type boolean * @default true */ noResultClean: true, /** * Select only mode * @type boolean */ selectOnly: false, /** * Input to search delay time, work on ajax data source * @type number * @default 0.5 */ inputDelay: 0.5, /** * -----------------------------------------Callback-------------------------------------------- */ /** * Result list item selected callback * @type function * @param object - selected item json data * @param self - plugin object */ eSelect : undefined, /** * Before result list show up callback, you can do anything prepared * @param self - plugin object */ eOpen : undefined, /** * Server side return data convert callback * @type function * @param data {object} server side return data * @param self {object} plugin object * @return {object} return data format： * @example * { * list : [{name:'aa',sex:1},{name:'bb',sex:1}...], * totalRow : 100 * } */ eAjaxSuccess : undefined, /** * Close selected item tag callback (multiple mode) * @type function * @param removeCount {number} remove item count * @param self {object} plugin object */ eTagRemove : undefined, /** * Clear selected item callback(single select mode) * @type function * @param self {object} plugin object */ eClear : undefined }; /** * SelectPage class definition * @constructor * @param {Object} input - input element * @param {Object} option */ var SelectPage = function(input, option) { this.setOption(option); this.setLanguage(); this.setCssClass(); this.setProp(); this.setElem(input); this.setButtonAttrDefault(); this.setInitRecord(); this.eDropdownButton(); this.eInput(); this.eWhole(); }; /** * Plugin version number */ SelectPage.version = '2.19'; /** * Plugin object cache key */ SelectPage.dataKey = 'selectPageObject'; /** * Options set * @param {Object} option */ SelectPage.prototype.setOption = function(option) { //use showField to default option.searchField = option.searchField || option.showField; option.andOr = option.andOr.toUpperCase(); if(option.andOr!=='AND' && option.andOr!=='OR') option.andOr = 'AND'; //support multiple field set var arr = ['searchField']; for (var i = 0; i < arr.length; i++) { option[arr[i]] = this.strToArray(option[arr[i]]); } //set multiple order field //example: [ ['id ASC'], ['name DESC'] ] if(option.orderBy !== false) option.orderBy = this.setOrderbyOption(option.orderBy, option.showField); //close auto fill result and auto select first in multiple mode and select item not close list if(option.multiple && !option.selectToCloseList){ option.autoFillResult = false; option.autoSelectFirst = false; } //show all item when pagination bar close, limited 200 if(!option.pagination) option.pageSize = 200; if($.type(option.listSize) !== 'number' || option.listSize < 0) option.listSize = 10; this.option = option; }; /** * String convert to array * @param str {string} * @return {Array} */ SelectPage.prototype.strToArray = function(str) { return str ? str.replace(/[\s　]+/g, '').split(',') : ''; }; /** * Set order field * @param {Array} arg_order * @param {string} arg_field - default sort field * @return {Array} */ SelectPage.prototype.setOrderbyOption = function(arg_order, arg_field) { var arr = [],orders = []; if (typeof arg_order === 'object') { for (var i = 0; i < arg_order.length; i++) { orders = $.trim(arg_order[i]).split(' '); if(orders.length) arr.push((orders.length === 2) ? orders.concat(): [orders[0], 'ASC']); } } else { orders = $.trim(arg_order).split(' '); arr[0] = (orders.length === 2) ? orders.concat(): (orders[0].toUpperCase().match(/^(ASC|DESC)$/i)) ? [arg_field, orders[0].toUpperCase()] : [orders[0], 'ASC']; } return arr; }; /** * i18n */ SelectPage.prototype.setLanguage = function() { var message, p = this.option; switch (p.lang) { // German case 'de': message = { add_btn