book_admin/public/assets/libs/selectpage/selectpage.js

/**
 * @summary     SelectPage
 * @desc        基于jQuery及使用Bootstrap环境开发的，下拉列表带输入快速查找及结果分页展示的多功能选择器
 * @file        selectpage.js
 * @version     2.7
 * @author      TerryZeng
 * @contact     https://terryz.github.io/
 * @license     MIT License
 *
 * 插件的部分功能使用、借鉴了
 * jQuery Plugin: jquery.ajax-combobox
 * 作者：Yuusaku Miyazaki <toumin.m7@gmail.com>(宮崎 雄策)
 * 
 * 插件依赖：
 * jQuery1.x
 * font-awesome(图标库)
 * 
 * 基本功能：
 * 可实时搜索的下拉列表
 * 对待选择的下拉项目可进行分页
 * 可使用键盘快捷分页操作
 * 使用标签的方式支持下拉项目多选
 * 
 * 修改记录：
 * 2016.04.20
 * 增加参数autoSelectFirst(是否自动选择列表中的第一项内容)
 * 解决下拉分页有初始化内容，并删除部分关键字时显示的结果集列表不足一页时，分页栏没有被生成的问题
 * 增加参数autoFillResult(是否自动填充内容)
 * 增加参数noResultClean(是否清空无匹配结果的输入关键字)
 * 2016.06.29
 * 修复分页栏鼠标点击时跳转的页数不正常的问题
 * 2016.08.04
 * 修复因宽度变化导致下拉触发按钮位置在出现下拉列表后发生偏移，原因是原控件的触发按钮是在输入框外部扩展，现已移入输入框内部
 * 2016.08.10
 * 弹出下拉列表时，若有已选中的项目，则将已选中的项目进行高亮，否则对第一行进行高亮
 * 下拉列表展开时，鼠标点击列表区域外，若当前列表已有选中项目，则直接隐藏列表；若当前列表没有默认选中项目，则使用当前高亮项目的内容进行设置
 * 2016.08.12
 * 解决控件对于原始input设置的样式(bootstrap原生提供的宽度样式)，宽度显示不正常的问题
 * 增加若设置了formatItem格式函数，则进行匹配的数据源从showField改为formatItem后的结果进行匹配
 * 2016.10
 * 增加光标进入输入框时，打开下拉列表的功能
 * 2017.01.16
 * 解决输入关键进行搜索并有匹配结果时，失去焦点后，没有自动选中第一项
 * 2017.01.19
 * 取消在输入状态时，判断到输入框里内容为空时，隐藏下拉列表的操作
 * 在展示下拉列表时，判断默认与输入框左对齐的列表是否会超出屏幕边界，是则右对齐，否则默认左对齐
 * 2017.01.20
 * 增加下拉列表展示之前判断列表的面板是否会超出底部区域，若超出则将列表向上对齐展示
 * 处理下拉列表显示一次操作显示多次的问题
 * 增加控件已有选中值时，在显示下拉列表时，直接跳转到该项目所在的页
 * 修复一些点击输入框出现下拉列表的Bug
 * 2017.03.24
 * 解决下拉分页插件向上浮动时位置不正确的问题
 * 解决下拉分页插件在已有选中值时，再次点击输入框后，打开的列表分页栏翻页功能无效的问题
 * 2017.04.21
 * 解决打开noResultClean参数，没有匹配输入关键词的项目时，列表不隐藏的问题
 * 2017.04.24
 * 解决控件在设置disabled="disabled"禁用状态时，点击向下的三角尖也可以打开列表的问题
 * 增加控件在已有选中项目时，直接删除输入框中的内容，作为清空控件内容的功能
 * 修改失去焦点的范围从document.body到document
 * 优化键盘输入捕捉的方式
 * 原列表有多页的情况下，再输入关键字，没有匹配到任何项目时，分页条的下一页，最后一页为可点击的样式，且分页信息的内容也不正确
 * 2017.05
 * 代码重构
 * 增加多项选择东西，并以标签（Tag）的形式展现在输入框中
 * 修正插件外框宽度问题
 * 修改选中事件回调的入参从key,value改为选中行的原始数据对象，以便更灵活的数据处理
 * 2017.06
 * 修复部分样式问题
 * 2017.06.13
 * 改名SelectPage
 * 2017.06.24
 * 增加Bootstrap3样式支持
 * 2017.08.08
 * 修复界面上排版内容较少时，列表会向上展示开的问题
 * 增加多选模式下的控制按钮区域，功能：“全选本页”、“取消本页”、“清空全部”
 * 修复最大宽度下超出父容器的宽度问题
 * 修复ajax模式报错的问题
 * 增加eAjaxSuccess请求成功后的数据处理回调
 * 2017.08.13（v2.0）
 * 代码重构
 * 修改默认样式，使用更简洁的风格
 * 增加maxSelectLimit参数，设置多选模式下最大选择个数限制
 * 增加eTagRemove回调函数，在多选模式下，移除标签时触发的回调
 * 优化错误信息展示的交互方式
 * 增加初始化选中项目时（多选模式），允许设置多个内容，例如：data-init="1,2,3,4"
 * 修复键盘操作分页部分情况下会失效的问题
 * 增加selectToCloseList参数，用于设置在多选模式下，选择项目后不关闭列表
 * 修复selectToCloseList:false状态下，键盘操作会失去焦点，操作不连贯的问题
 * 增加$.fn.selectPageClear的API，用于清空控件所有已选中的项目
 * 增加$.fn.selectPageText的API，用于获得已选择的项目文本内容
 * 增加$.fn.selectPageData的API，用于动态修改插件数据源
 * 增加$.fn.SelectedRefresh的API，用于在使用.val()的方式修改了插件的选中项目后，刷新显示在输入框中的文本内容
 * 优化控件内部对象缓存机制
 * 去除快速使用脚本b.selectpage.js
 * 初始化入口从原来的$('').bSelectPage({})修改为$('').selectPage({})
 * 重新调整参数名称
 * 修正Bootstrap3下控件宽度、高度应用的BUG
 * 2017.08.19（v2.2）
 * 增加为原始输入框的value属性设置初始化值，以初始化插件选中项目
 * 修复多选模式下关闭标签出错的问题
 * 修复输入查询关键字后失去焦点，再次获得焦点时，插件没有根据已存在的关键进行过滤
 * 增加inputDelay配置项目，设置ajax数据源模式下，延迟输入查询的时间，避免在单位时间内连续输入发起的连续ajax查询，单位：秒，默认值：0.5
 * 修正对数字类型的列进行排序时，仍然以字符串的方式进行排序
 * 2017.08.23（v2.3）
 * 修复在查询关键字状态下，分页数据没有被更新，导致分页按钮功能不正常问题
 * 清理整理内部对象
 * 修复多选模式下，若设置了最大选中项目个数，点击“全选本页”按钮时，仅选中指定的最大数量
 * 增加selectpage.base.css兼容无UI框架的方案，但建议要至少使用normalize.css
 * 2017.08.26（v2.4）
 * 增加pagination参数，指定稿件是否使用分页加载数据，以及显示分页栏
 * 增加listSize参数，指定了不使用分页的列表，显示的高度，单位为个（选项个数），默认显示10个项目的高度
 * 设置selectOnly:true的情况下，输入框为只读模式，不允许输入查询过滤
 * 修复多选模式下及设置了最大选中项目时，选中了项目再次点击“全选本页”按钮会在已选择的基础上增加最大选中项目个数的项目
 * 调整下拉列表样式及位置
 * 增加单选模式下，选中项目后，自动显示清空按钮
 * 修复多选模式下，移除本页和清除所有两个按钮点击后，回调出错的问题
 * 增加搜索无结果时显示提示信息
 * 2017.09.07（v2.5）
 * 修复多选模式下，初始化项目的显示文本没有使用formatItem回调进行格式化
 * 修复ajax数据源模式下，输入查询关键字时，翻页始终为第一页的问题
 * 2017.09.07（v2.6）
 * 修复单选模式下初始化项目的显示文本没有使用formatItem回调格式化的问题
 * 修复单选模式存在初始化项目时，再打开下拉列表时，仅显示匹配的项目一条数据的问题
 * 修复多选模式下，动态修改选中值selectPageRefresh功能无效
 * 2017.09.12（v2.7）
 * 增加eClear回调，单选模式下，清除按钮的功能回调
 * 单选，多选模式下，输入框禁用或只读状态，不显示清除按钮
 * 2017.09.23（v2.8）
 * 调整部分样式
 * 修复可视区域高度较小时，列表始终会向上展开的问题
 * 分离键盘事件处理，对键盘输入精准控制
 * 优化区域外点击处理
 * 优化数据展示渲染效率
 * 优化列表位置定位的准确性
 */
;
(function (factory) {
    if (typeof define === "function" && define.amd) {
        // AMD模式
        define(["jquery"], factory);
    } else {
        // 全局模式
        factory(jQuery);
    }
}(function ($) {
    "use strict";
    /**
     * @desc 默认参数集
     */
    var defaults = {
        /**
         * @desc 数据源(String：Ajax查询的URL|Object：JSON格式的数据源)
         * @type {string|Object}
         * @example
         * string：服务端请求的URL地址
         * Object：JSON格式数组，推荐格式：[{a:1,b:2,c:3},{...}]
         */
        data: undefined,
        /**
         * @desc 插件显示语言 ('ja', 'en', 'es', 'pt-br'等)
         * @type string 默认'cn'
         */
        lang: 'cn',
        /**
         * @desc 是否为多选模式（标签模式）
         * @type boolean 默认值false
         */
        multiple: false,
        /**
         * @desc 是否分页
         * @type boolean 默认值 true
         */
        pagination: true,
        /**
         * @desc 关闭分页的状态下，列表显示的项目个数，其它的项目以滚动条滚动方式展现
         * @type number 默认值 10
         */
        listSize: 10,
        /**
         * @desc 是否启用多选模式的控制按钮区域
         * 仅multiple: true模式下可用
         * @type boolean 默认值true
         */
        multipleControlbar: true,
        /**
         * @desc 多选模式下最大选择个数，0为不限制
         * @type number 默认0
         */
        maxSelectLimit: 0,
        /**
         * @desc 选中项目后关闭列表
         * 该设置仅在多选模式下multiple:true有效
         * @type boolean 默认值true
         */
        selectToCloseList: true,
        /**
         * @desc 插件初始值指定，该值会与option.keyField字段进行匹配，若匹配到，则自动设置选中并高亮
         * @type string 
         */
        initRecord: undefined,
        /**
         * @desc 使用ajax方式获取数据时，使用该参数设置对应的数据表名
         * @type string
         */
        dbTable: 'tbl',
        /**
         * @desc 值字段，通常该字段的内容会自动保存在隐藏域中
         * @type string 默认值为'id'
         */
        keyField: 'id',
        /**
         * @desc 结果集中用于显示的属性名
         * @type string 默认字段为'name'
         */
        showField: 'name',
        /**
         * @desc 查询字段，仅为使用URL(ajax)方式查询服务端时，设置后端查询的字段，不设置则默认使用showField设置的字段
         * @type string
         */
        searchField: undefined,
        /**
         * @desc 查询方式 ('AND' or 'OR')
         * @type string 默认为'AND'
         */
        andOr: 'AND',
        /**
         * @desc 数据排序方式
         * @type array 若不设置则默认对showField指定的字段进行排序
         * @example
         * orderBy : ['id desc']//对ID字段进行降序排序
         */
        orderBy: undefined,
        /**
         * @desc 每页显示的记录数
         * @type number
         */
        pageSize: 10,
        /**
         * @desc 使用URL进行AJAX查询时，可传递查询参数
         * @type function
         * @return object
         * @example params : function(){return {'name':'aa','sex':1};}
         */
        params: undefined,
        /**
         * 列表项目显示内容格式化
         * 参数类型：function
         * @type boolean
         * @param data {object} 行数据object格式
         * @return string
         */
        formatItem: undefined,
        /**
         * 是否在输入框获得焦点时，展开下拉窗口
         * @type boolean 默认值true
         */
        focusDropList: true,
        /**
         * 是否自动选择列表中的第一项内容(输入关键字查询模式，直接使用鼠标下拉并不触发)
         * @type boolean 默认值false
         */
        autoSelectFirst: true,
        /**
         * 是否自动填充内容
         * 若有列表项目被高亮显示，在焦点离开控件后，自动设置该项为选中内容
         * @type boolean 默认值false
         */
        autoFillResult: true,
        /**
         * 是否清空输入关键字
         * 在输入框中输入内容进行查询，但没有匹配的内容返回，在焦点离开控件后，自动清空输入框输入的内容
         * @type boolean 默认值false
         */
        noResultClean: true,
        /**
         * @desc 只选择模式
         * @type boolean
         */
        selectOnly: false,
        /**
         * @desc 输入关键字查询延迟（仅ajax数据源模式下可用）
         * @type number 默认值：0.5秒
         */
        inputDelay: 0.5,
        /**
         * -----------------------------------------事件回调--------------------------------------------
         */
        /**
         * @type function
         * @param object
         * @param dom
         */
        eSelect: undefined,
        /**
         * ajax请求模式，请求成功后的数据处理回调
         * 回调的功能用于自定义处理服务端返回的数据
         * @type function
         * @param data {object} ajax服务端返回的json数据
         * @return {object} 函数返回的数据结构如下：
         * @example 
         * {
         *   list : [{name:'aa',sex:1},{name:'bb',sex:1}...],
         *   totalRow : 100
         * }
         */
        eAjaxSuccess: undefined,
        /**
         * 多选模式下，关闭标签是的回调函数
         * @type function
         * @param removeCount 被移除的个数
         */
        eTagRemove: undefined,
        /**
         * 单选模式下，选中项目后的清除按钮功能回调
         * @type function
         */
        eClear: undefined
    };


    /**
     * @constructor
     * @classdesc 插件初始化
     * @param {Object} input - 插件的初始化输入框元素。
     * @param {Object} option - 初始化参数
     */
    var SelectPage = function (input, option) {
        var option = $.extend({}, option, $(input).data());
        //特殊字段处理
        $.each({data: 'source', keyField: 'primaryKey', showField: 'field', pageSize: 'perPage'}, function (i, j) {
            if (typeof option[j] !== 'undefined') {
                option[i] = option[j];
                delete option[j];
            }
        });
        this.setOption(option);

        this.setLanguage();
        this.setCssClass();
        this.setProp();
        this.setElem(input, option);

        this.setButtonAttrDefault();
        this.setInitRecord();

        this.eDropdownButton();
        this.eInput();
        this.eWhole();
    };
    /**
     * 插件版本号
     */
    SelectPage.version = '2.7';
    /**
     * 插件缓存内部对象的KEY
     */
    SelectPage.dataKey = 'selectPageObject';
    /**
     * 全局范围设置当前点击是否为插件自身的标识
     */
    SelectPage.objStatusKey = 'selectPage-self-mark';
    /**
     * 全局范围设置当前点击的selectpage的索引下标
     */
    SelectPage.objStatusIndex = 'selectPage-self-index';
    /**
     * @desc 参数初始化
     * @param {Object} option - 参数集
     */
    SelectPage.prototype.setOption = function (option) {

        //若没有设置搜索字段，则使用显示字段作为搜索字段
        option.searchField = (option.searchField === undefined) ? option.showField : option.searchField;

        //统一大写
        option.andOr = option.andOr.toUpperCase();
        if (option.andOr !== 'AND' && option.andOr !== 'OR')
            option.andOr = 'AND';

        //将参数内容从使用","分隔的字符串转换为数组
        var arr = ['searchField'];
        for (var i = 0; i < arr.length; i++) {
            option[arr[i]] = this.strToArray(option[arr[i]]);
        }

        //设置排序字段
        option.orderBy = (option.orderBy === undefined) ? option.searchField : option.orderBy;

        //设置多字段排序
        //例:  [ ['id', 'ASC'], ['name', 'DESC'] ]
        option.orderBy = this.setOrderbyOption(option.orderBy, option.showField);
        //多选模式下，若设置了选择项目不关闭列表功能，则强制关闭自动选择第一项功能和自动选中高亮的项目功能
        //原因是打开了会总是莫明选择了第一项，体验不佳
        if (option.multiple && !option.selectToCloseList) {
            option.autoFillResult = false;
            option.autoSelectFirst = false;
        }

        if ($.type(option.data) === 'string') {
            option.autoSelectFirst = false;
        }
        //若不需要分页功能，则将所有数据都显示出来，上限200项
        if (!option.pagination)
            option.pageSize = 200;
        if ($.type(option.listSize) !== 'number' || option.listSize < 0)
            option.listSize = 10;
        this.option = option;
    };

    /**
     * @desc 字符串转换为数组
     * @param str {string} - 字符串
     * @return {Array} - 数组
     */
    SelectPage.prototype.strToArray = function (str) {
        if (!str)
            return '';
        return str.replace(/[\s　]+/g, '').split(',');
    };

    /**
     * @desc 设置多字段排序
     * @param {Array} arg_order - 排序顺序
     * @param {string} arg_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(' ');
                arr[i] = (orders.length == 2) ? orders : [orders[0], 'ASC'];
            }
        } else {
            orders = $.trim(arg_order).split(' ');
            arr[0] = (orders.length == 2) ? orders : (orders[0].match(/^(ASC|DESC)$/i)) ? [arg_field, orders[0]] : [orders[0], 'ASC'];
        }
        return arr;
    };

    /**
     * @desc 界面文字国际化
     */
    SelectPage.prototype.setLanguage = function () {
        var message;
        switch (this.option.lang) {
            // German
            case 'de':
                message = {
                    add_btn: 'Hinzufügen-Button',
                    add_title: 'Box hinzufügen',
                    del_btn: 'Löschen-Button',
                    del_title: 'Box löschen',
                    next: 'Nächsten',
                    next_title: 'Nächsten' + this.option.pageSize + ' (Pfeil-rechts)',
                    prev: 'Vorherigen',
                    prev_title: 'Vorherigen' + this.option.pageSize + ' (Pfeil-links)',
                    first_title: 'Ersten (Umschalt + Pfeil-links)',
                    last_title: 'Letzten (Umschalt + Pfeil-rechts)',
                    get_all_btn: 'alle (Pfeil-runter)',
                    get_all_alt: '(Button)',
                    close_btn: 'Schließen (Tab)',
                    close_alt: '(Button)',
                    loading: 'lade...',
                    loading_alt: '(lade)',
                    page_info: 'num_page_top - num_page_end von cnt_whole',
                    select_ng: 'Achtung: Bitte wählen Sie aus der Liste aus.',
                    select_ok: 'OK : Richtig ausgewählt.',
                    not_found: 'nicht gefunden',
                    ajax_error: 'Bei der Verbindung zum Server ist ein Fehler aufgetreten.'
                };
                break;

                // English
            case 'en':
                message = {
                    add_btn: 'Add button',
                    add_title: 'add a box',
                    del_btn: 'Del button',
                    del_title: 'delete a box',
                    next: 'Next',
                    next_title: 'Next' + this.option.pageSize + ' (Right key)',
                    prev: 'Prev',
                    prev_title: 'Prev' + this.option.pageSize + ' (Left key)',
                    first_title: 'First (Shift + Left key)',
                    last_title: 'Last (Shift + Right key)',
                    get_all_btn: 'Get All (Down key)',
                    get_all_alt: '(button)',
                    close_btn: 'Close (Tab key)',
                    close_alt: '(button)',
                    loading: 'loading...',
                    loading_alt: '(loading)',
                    page_info: 'num_page_top - num_page_end of cnt_whole',
                    select_ng: 'Attention : Please choose from among the list.',
                    select_ok: 'OK : Correctly selected.',
                    not_found: 'not found',
                    ajax_error: 'An error occurred while connecting to server.'
                };
                break;

                // 中文
            case 'cn':
                message = {
                    add_btn: '添加按钮',
                    add_title: '添加区域',
                    del_btn: '删除按钮',
                    del_title: '删除区域',
                    next: '下一页',
                    next_title: '下' + this.option.pageSize + ' (→)',
                    prev: '上一页',
                    prev_title: '上' + this.option.pageSize + ' (←)',
                    first_title: '首页 (Shift + ←)',
                    last_title: '尾页 (Shift + →)',
                    get_all_btn: '获得全部 (↓)',
                    get_all_alt: '(按钮)',
                    close_btn: '关闭 (Tab键)',
                    close_alt: '(按钮)',
                    loading: '读取中...',
                    loading_alt: '(读取中)',
                    page_info: 'num_page_top - num_page_end (共 cnt_whole)',
                    select_ng: '请注意：请从列表中选择.',
                    select_ok: 'OK : 已经选择.',
                    not_found: '无查询结果',
                    ajax_error: '连接到服务器时发生错误！'
                };
                break;

                // Spanish
            case 'es':
                message = {
                    add_btn: 'Agregar boton',
                    add_title: 'Agregar una opcion',
                    del_btn: 'Borrar boton',
                    del_title: 'Borrar una opcion',
                    next: 'Siguiente',
                    next_title: 'Proximas ' + this.option.pageSize + ' (tecla derecha)',
                    prev: 'Anterior',
                    prev_title: 'Anteriores ' + this.option.pageSize + ' (tecla izquierda)',
                    first_title: 'Primera (Shift + Left)',
                    last_title: 'Ultima (Shift + Right)',
                    get_all_btn: 'Ver todos (tecla abajo)',
                    get_all_alt: '(boton)',
                    close_btn: 'Cerrar (tecla TAB)',
                    close_alt: '(boton)',
                    loading: 'Cargando...',
                    loading_alt: '(Cargando)',
                    page_info: 'num_page_top - num_page_end de cnt_whole',
                    select_ng: 'Atencion: Elija una opcion de la lista.',
                    select_ok: 'OK: Correctamente seleccionado.',
                    not_found: 'no encuentre',
                    ajax_error: 'Un error ocurrió mientras conectando al servidor.'
                };
                break;

                // Brazilian Portuguese
            case 'pt-br':
                message = {
                    add_btn: 'Adicionar botão',
                    add_title: 'Adicionar uma caixa',
                    del_btn: 'Apagar botão',
                    del_title: 'Apagar uma caixa',
                    next: 'Próxima',
                    next_title: 'Próxima ' + this.option.pageSize + ' (tecla direita)',
                    prev: 'Anterior',
                    prev_title: 'Anterior ' + this.option.pageSize + ' (tecla esquerda)',
                    first_title: 'Primeira (Shift + Left)',
                    last_title: 'Última (Shift + Right)',
                    get_all_btn: 'Ver todos (Seta para baixo)',
                    get_all_alt: '(botão)',
                    close_btn: 'Fechar (tecla TAB)',
                    close_alt: '(botão)',
                    loading: 'Carregando...',
                    loading_alt: '(Carregando)',
                    page_info: 'num_page_top - num_page_end de cnt_whole',
                    select_ng: 'Atenção: Escolha uma opção da lista.',
                    select_ok: 'OK: Selecionado Corretamente.',
                    not_found: 'não encontrado',
                    ajax_error: 'Um erro aconteceu enquanto conectando a servidor.'
                };
                break;

                // Japanese
            case 'ja':
                message = {
                    add_btn: '追加ボタン',
                    add_title: '入力ボックスを追加します',
                    del_btn: '削除ボタン',
                    del_title: '入力ボックスを削除します',
                    next: '次へ',
                    next_title: '次の' + this.option.pageSize + '件 (右キー)',
                    prev: '前へ',
                    prev_title: '前の' + this.option.pageSize + '件 (左キー)',
                    first_title: '最初のページへ (Shift + 左キー)',
                    last_title: '最後のページへ (Shift + 右キー)',
                    get_all_btn: '全件取得 (下キー)',
                    get_all_alt: '画像:ボタン',
                    close_btn: '閉じる (Tabキー)',
                    close_alt: '画像:ボタン',
                    loading: '読み込み中...',
                    loading_alt: '画像:読み込み中...',
                    page_info: 'num_page_top - num_page_end 件 (全 cnt_whole 件)',
                    select_ng: '注意 : リストの中から選択してください',
                    select_ok: 'OK : 正しく選択されました。',
                    not_found: '(0 件)',
                    ajax_error: 'サーバとの通信でエラーが発生しました。'
                };
                break;
        }
        this.message = message;
    };

    /**
     * @desc CSS样式表名称字义
     */
    SelectPage.prototype.setCssClass = function () {
        var css_class = {
            container: 'sp_container',
            // SelectPage最外层DIV的打开状态
            container_open: 'sp_container_open',
            re_area: 'sp_result_area',
            control_box: 'sp_control_box',
            //标签及输入框的
            element_box: 'sp_element_box',
            // 分页导航
            navi: 'pagination',
            // 下拉结果列表
            results: 'sp_results',
            re_off: 'sp_results_off',
            select: 'sp_over',
            select_ok: 'sp_select_ok',
            select_ng: 'sp_select_ng',
            selected: 'sp_selected',
            input_off: 'sp_input_off',
            message_box: 'sp_message_box',
            // 多选模式的禁用状态样式
            disabled: 'sp_disabled',

            button: 'sp_button',
            btn_on: 'sp_btn_on',
            btn_out: 'sp_btn_out',
            input: 'sp_input',
            clear_btn: 'sp_clear_btn'
        };
        this.css_class = css_class;
    };

    /**
     * @desc 设置属性默认值
     */
    SelectPage.prototype.setProp = function () {
        this.prop = {
            //当前页
            current_page: 1,
            //总页数
            max_page: 1,
            //是否正在Ajax请求
            is_loading: false,
            xhr: false,
            //使用键盘进行分页
            key_paging: false,
            //使用键盘进行选择
            key_select: false,
            //上一个选择的项目值
            prev_value: '',
            //选中项目的文本内容
            selected_text: '',
            //上一次键盘输入的时间
            last_input_time: undefined
        };
        this.template = {
            tag: {
                content: '<li class="selected_tag" itemvalue="#item_value#">#item_text#<span class="tag_close">×</span></li>',
                textKey: '#item_text#',
                valueKey: '#item_value#'
            }
        };
    };

    /**
     * @desc 插件HTML结构生成
     * @param {Object} combo_input - 输入框源对象
     * @param {Object} option - 插件参数
     */
    SelectPage.prototype.setElem = function (combo_input, option) {
        // 1. 生成、替换DOM对象
        var elem = {};//本体
        var orgWidth = $(combo_input).outerWidth();

        elem.combo_input = $(combo_input).attr({'autocomplete': 'off'}).addClass(this.css_class.input).wrap('<div>');
        //只选择模式设置输入框为只读状态
        if (option.selectOnly)
            $(elem.combo_input).prop('readonly', true);
        elem.container = $(elem.combo_input).parent().addClass(this.css_class.container);
        if ($(elem.combo_input).prop('disabled')) {
            if (option.multiple)
                $(elem.container).addClass(this.css_class.disabled);
            else
                $(elem.combo_input).addClass(this.css_class.input_off);
        }

        //$(elem.container).width(orgWidth);

        elem.button = $('<div>').addClass(this.css_class.button);
        //bootstrap风格的向下三角箭头
        elem.dropdown = $('<span class="bs-caret"><span class="caret"></span></span>');
        //单选模式下清除的按钮X
        elem.clear_btn = $('<div>').append('×').addClass(this.css_class.clear_btn).attr('title', '清除内容');

        //多选模式下带标签显示及文本输入的组合框
        elem.element_box = $('<ul>').addClass(this.css_class.element_box);
        if (option.multiple && option.multipleControlbar)
            elem.control = $('<div>').addClass(this.css_class.control_box);
        //结果集列表
        elem.result_area = $('<div>').addClass(this.css_class.re_area);
        //列表中的分页栏pagination
        if (option.pagination)
            elem.navi = $('<ul>').addClass(this.css_class.navi).addClass("hide");
        elem.results = $('<ul>').addClass(this.css_class.results);

        /**
         * 将原输入框的Name交换到Hidden中，因为具体需要保存传递到后端的是ID，而非Title
         */
        var namePrefix = '_text';
        //将keyField的值放入"input:hidden"
        var input_id = ($(elem.combo_input).attr('id') !== undefined) ? $(elem.combo_input).attr('id') : $(elem.combo_input).attr('name');
        var input_name = ($(elem.combo_input).attr('name') !== undefined) ? $(elem.combo_input).attr('name') : 'selectPage';
        var hidden_name = input_name,
                hidden_id = input_id;

        // CakePHP使用的措施 例:data[search][user] -> data[search][user_primary_key]
        if (input_name.match(/\]$/))
            input_name = input_name.replace(/\]?$/, namePrefix);
        else
            input_name += namePrefix;
        if (input_id.match(/\]$/))
            input_id = input_id.replace(/\]?$/, namePrefix);
        else
            input_id += namePrefix;

        //将输入框的Name与Hidden的Name进行交换，使得可以将项目的具体ID被保存到后端进行处理
        elem.hidden = $('<input type="hidden" class="sp_hidden" />').attr({
            name: hidden_name,
            id: hidden_id
        }).val('');
        $(elem.combo_input).attr({
            name: input_name,
            id: input_id
        });

        // 2. DOM内容放置
        $(elem.container).append(elem.button).append(elem.result_area).append(elem.hidden);
        $(elem.button).append(elem.dropdown);
        $(elem.result_area).append(elem.results);
        if (option.pagination)
            $(elem.result_area).append(elem.navi);

        //多选模式下的特殊处理
        if (option.multiple) {
            if (option.multipleControlbar) {
                // $(elem.control).append('<button type="button" class="btn btn-default sp_select_all" ><i class="fa fa-check-square-o"></i> 全选本页</button>');
                $(elem.control).append('<button type="button" class="btn btn-default sp_unselect_all" ><i class="fa fa-square-o"></i> 取消本页</button>');
                $(elem.control).append('<button type="button" class="btn btn-default sp_clear_all" ><i class="fa fa-ban"></i> 清除全部</button>');
                $(elem.result_area).prepend(elem.control);
            }
            $(elem.container).addClass('sp_container_combo');
            $(elem.combo_input).addClass('sp_combo_input').before($(elem.element_box));
            var li = $('<li>').addClass('input_box');
            $(li).append($(elem.combo_input));
            $(elem.element_box).append($(li));
            if ($(elem.combo_input).attr('placeholder'))
                $(elem.combo_input).attr('placeholder_bak', $(elem.combo_input).attr('placeholder'));
        }

        this.elem = elem;
    };

    /**
     * @desc 将控件的部分内容设置为默认状态
     */
    SelectPage.prototype.setButtonAttrDefault = function () {
        /*
         if (this.option.selectOnly) {
         if ($(this.elem.combo_input).val() !== '') {
         if ($(this.elem.hidden).val() !== '') {
         //选择条件
         $(this.elem.combo_input).attr('title', this.message.select_ok).removeClass(this.css_class.select_ng).addClass(this.css_class.select_ok);
         } else {
         //输入方式
         $(this.elem.combo_input).attr('title', this.message.select_ng).removeClass(this.css_class.select_ok).addClass(this.css_class.select_ng);
         }
         } else {
         $(this.elem.hidden).val('');
         $(this.elem.combo_input).removeAttr('title').removeClass(this.css_class.select_ng);
         }
         }
         */
        $(this.elem.button).attr('title', this.message.get_all_btn);
        //按钮的title属性修改
        $(this.elem.button).attr('title', this.message.close_btn);
    };

    /**
     * @desc 为插件设置初始化的选中值（若有指定的话），执行第一步，数据匹配
     */
    SelectPage.prototype.setInitRecord = function (refresh) {
        var self = this;
        if ($.type($(self.elem.combo_input).data('init')) != 'undefined')
            self.option.initRecord = String($(self.elem.combo_input).data('init'));
        //若在输入框中放入了初始化值，则将它放到隐藏域中进行选中项目初始化
        //若输入框设置了初始值，同时又设置了data-init属性，那么以data-init属性为优先选择
        if (!self.option.initRecord)
            if ($(self.elem.combo_input).val())
                self.option.initRecord = $(self.elem.combo_input).val();
        $(self.elem.combo_input).val('');
        if ((refresh && $(self.elem.hidden).val()) || $.type(self.option.initRecord) === 'string') {
            // 初始的KEY值放入隐藏域
            if (!refresh)
                $(self.elem.hidden).val(self.option.initRecord);
            //将初始值放入控件
            if (typeof self.option.data === 'object') {//json数据源模式
                var data = new Array();
                var keyarr = refresh ? $(self.elem.hidden).val().split(',') : self.option.initRecord.split(',');
                $.each(keyarr, function (index, row) {
                    for (var i = 0; i < self.option.data.length; i++) {
                        if (self.option.data[i][self.option.keyField] == row) {
                            data.push(self.option.data[i]);
                            break;
                        }
                    }
                });
                //在单选模式下，若使用了多选模式的初始化值（“key1,key2,...”多选方式），则不进行初始化选中操作
                if (!self.option.multiple && data.length > 1)
                    data = null;
                self.afterInit(self, data);
            } else {//ajax数据源模式
                $.ajax({
                    dataType: 'json',
                    type: 'POST',
                    url: self.option.data,
                    data: {
                        searchTable: self.option.dbTable,
                        searchKey: self.option.keyField,
                        searchValue: refresh ? $(self.elem.hidden).val() : self.option.initRecord,
                        field: self.option.showField,
                        order_by: self.option.orderBy,
                        pkey_name: self.option.keyField,
                        pkey_value: refresh ? $(self.elem.hidden).val() : self.option.initRecord
                    },
                    success: function (returnData) {
                        var data;
                        if (self.option.eAjaxSuccess && $.isFunction(self.option.eAjaxSuccess)) {
                            data = self.option.eAjaxSuccess(returnData);
                        } else {
                            data = returnData;
                        }
                        self.afterInit(self, data.list);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        self.ajaxErrorNotify(self, errorThrown);
                    }
                });
            }
        }
    };

    /**
     * @desc 匹配后的数据在插件中进行展示
     * @param {Object} self - 插件的内部对象
     * @param {Object} data - 列表数据
     */
    SelectPage.prototype.afterInit = function (self, data) {
        if (!data)
            return;
        if (!$.isArray(data))
            data = [data];
        if (data.length === 0)
            return;
        var getText = function (row) {
            var text = row[self.option.showField];
            if (self.option.formatItem && $.isFunction(self.option.formatItem)) {
                try {
                    text = self.option.formatItem(row);
                } catch (e) {
                }
            }
            return text;
        };

        if (self.option.multiple) {//多选模式初始化
            self.clearAll(self);
            $.each(data, function (i, row) {
                var item = {text: getText(row), value: row[self.option.keyField]};
                if (!self.isAlreadySelected(self, item))
                    self.addNewTag(self, item);
            });
            self.tagValuesSet(self);
            self.inputResize(self);
        } else {//单选模式初始化
            var row = data[0];
			var initval = self.option.init ? self.option.init : $(self.elem.hidden).val();
			if(initval){
				for(var i=0; i<data.length; i++){
					if(initval == data[i][self.option.keyField]){
						row = data[i];
						break;
					}
				}
			}
            $(self.elem.combo_input).val(getText(row));
            $(self.elem.hidden).val(row[self.option.keyField]);
            self.prop.prev_value = getText(row);
            self.prop.selected_text = getText(row);
            if (self.option.selectOnly) {
                $(self.elem.combo_input).attr('title', self.message.select_ok).removeClass(self.css_class.select_ng).addClass(self.css_class.select_ok);
            }
            self.putClearButton();
        }
    };

    /**
     * @desc 下拉按钮的事件处理
     */
    SelectPage.prototype.eDropdownButton = function () {
        var self = this;
        $(self.elem.button).mouseup(function (ev) {
            ev.stopPropagation();
            if ($(self.elem.result_area).is(':hidden') && !$(self.elem.combo_input).prop('disabled')) {
                $(self.elem.combo_input).focus();
            } else
                self.hideResults(self);
        }).mouseout(); // default: mouseout
    };

    /**
     * @desc 输入框的事件绑定
     */
    SelectPage.prototype.eInput = function () {
        var self = this;
        var showList = function () {
            self.prop.page_move = false;
            self.suggest(self);
            self.setCssFocusedInput(self);
        };
        $(self.elem.combo_input).keyup(function (e) {
            self.processKey(self, e);
        }).keydown(function (e) {
            self.processControl(self, e);
        }).focus(function (e) {
            //增加输入框获得焦点后，显示数据列表
            if ($(self.elem.result_area).is(':hidden')) {
                e.stopPropagation();
                self.prop.first_show = true;
                showList();
            }
        });
        $(self.elem.container).on('click.SelectPage', 'div.' + self.css_class.clear_btn, function (e) {
            e.stopPropagation();
            self.clearAll(self);
            $(self.elem.clear_btn).remove();
            if (self.option.eClear && $.isFunction(self.option.eClear))
                self.option.eClear();
        });
        if (self.option.multiple) {
            if (self.option.multipleControlbar) {
                //全选本页按钮
                $('.sp_select_all', self.elem.control).on('click.SelectPage', function (e) {
                    self.selectAllLine(self);
                });
                //取消全选本页按钮
                $('.sp_unselect_all', self.elem.control).on('click.SelectPage', function (e) {
                    self.unselectAllLine(self);
                });
                //清除全部按钮
                $('.sp_clear_all', self.elem.control).on('click.SelectPage', function (e) {
                    self.clearAll(self);
                });
            }
            $(self.elem.element_box).on('click.SelectPage', function (e) {
                var srcEl = e.target || e.srcElement;
                if ($(srcEl).is('ul'))
                    $(self.elem.combo_input).focus();
            });
            //标签关闭操作
            //关闭同时需要将该标签的key从已保存的隐藏域中删除
            $(self.elem.element_box).on('click.SelectPage', 'span.tag_close', function () {
                var li = $(this).closest('li');
                self.removeTag(self, li);
                showList();
                if (self.option.eTagRemove && $.isFunction(self.option.eTagRemove))
                    self.option.eTagRemove(1);
            });
            self.inputResize(self);
        }
    };

    /**
     * 插件之外区域的事件处理
     */
    SelectPage.prototype.eWhole = function () {
        var self = this;
        /*
         //如果是点击了控件本身则不响应外部鼠标点击事件
         $(self.elem.container).mousedown(function() {
         var thisindex = $('div.sp_container').index(this);
         var lastindex = $(document.body).data(SelectPage.objStatusIndex);
         if(lastindex != undefined && thisindex != lastindex)
         $(document.body).data(SelectPage.objStatusKey,false);
         else
         $(document.body).data(SelectPage.objStatusKey,true);
         $(document.body).data(SelectPage.objStatusIndex,thisindex);
         });
         */
        //控件外部的鼠标点击事件处理
        $(document).off('mousedown.selectPage').on('mousedown.selectPage', function (e) {
            var ele = e.target || e.srcElement;
            var sm = $(ele).closest('div.' + self.css_class.container);

            //清除内容
            var cleanContent = function (obj) {
                $(obj.elem.combo_input).val('');
                if (!obj.option.multiple)
                    $(obj.elem.hidden).val('');
                obj.prop.selected_text = '';
            };

            //列表是打开的状态
            $('div.' + self.css_class.container + '.' + self.css_class.container_open).each(function () {
                if (this == sm[0])
                    return;
                var d = $('input.' + self.css_class.input, this).data(SelectPage.dataKey);


                //若控件已有选中的的项目，而文本输入框中清空了关键字，则清空控件已选中的项目
                if (!$(d.elem.combo_input).val() && $(d.elem.hidden).val() && !d.option.multiple) {
                    d.prop.current_page = 1;//重置当前页为1
                    cleanContent(d);
                    d.hideResults(d);
                    return true;
                }
                //匹配项且高亮时，下拉分页控件失去焦点后，自动选择该项目
                if ($('li', $(d.elem.results)).size() > 0) {
                    if (d.option.autoFillResult) {//打开自动内容填充功能
                        //若已有选中项目，则直接隐藏列表
                        if ($('li.sp_selected', $(d.elem.results)).size() > 0) {
                            d.hideResults(d);
                        } else if ($('li.sp_over', $(d.elem.results)).size() > 0) {
                            //若控件已有选中的值，则忽略高亮的项目
                            if ($(d.elem.hidden).val())
                                d.hideResults(d);
                            //若没有已选中的项目，且列表中有高亮项目时，选中当前高亮的行
                            else
                                d.selectCurrentLine(d, true);
                        } else if (d.option.autoSelectFirst) {
                            //若控件已有选中的值，则忽略自动选择第一项的功能
                            if ($(d.elem.hidden).val())
                                d.hideResults(d);
                            else {
                                //对于没有选中，没有高亮的情况，若插件设置了自动选中第一项时，则选中第一项
                                d.nextLine(d);
                                //self.nextLine(self);
                                d.selectCurrentLine(d, true);
                            }
                        } else
                            d.hideResults(d);
                    } else
                        d.hideResults(d);
                } else {
                    //无匹配项目时，自动清空用户输入的关键词
                    if (d.option.noResultClean)
                        cleanContent(d);
                    else {
                        if (!d.option.multiple)
                            $(d.elem.hidden).val('');
                    }
                    d.hideResults(d);
                }
            });
            /*
             if ($(document.body).data(SelectPage.objStatusKey)) $(document.body).data(SelectPage.objStatusKey,false);
             else {
             //清除内容
             var cleanContent = function(obj){
             $(obj.elem.combo_input).val('');
             if(!obj.option.multiple) $(obj.elem.hidden).val('');
             obj.prop.selected_text = '';
             };
             //列表是打开的状态
             $('div.' + self.css_class.container + '.' + self.css_class.container_open).each(function(){
             var d = $('input.'+self.css_class.input,this).data(SelectPage.dataKey);
             
             //若控件已有选中的的项目，而文本输入框中清空了关键字，则清空控件已选中的项目
             if(!$(d.elem.combo_input).val() && $(d.elem.hidden).val() && !d.option.multiple){
             d.prop.current_page = 1;//重置当前页为1
             cleanContent(d);
             d.hideResults(d);
             return true;
             }
             //匹配项且高亮时，下拉分页控件失去焦点后，自动选择该项目
             if ($('li', $(d.elem.results)).size() > 0) {
             if(d.option.autoFillResult) {//打开自动内容填充功能
             //若已有选中项目，则直接隐藏列表
             if ($('li.sp_selected', $(d.elem.results)).size() > 0) {
             d.hideResults(d);
             }else if($('li.sp_over', $(d.elem.results)).size() > 0){
             //若控件已有选中的值，则忽略高亮的项目
             if($(d.elem.hidden).val()) d.hideResults(d);
             //若没有已选中的项目，且列表中有高亮项目时，选中当前高亮的行
             else d.selectCurrentLine(d, true);
             }else if(d.option.autoSelectFirst){
             //若控件已有选中的值，则忽略自动选择第一项的功能
             if($(d.elem.hidden).val()) d.hideResults(d);
             else{
             //对于没有选中，没有高亮的情况，若插件设置了自动选中第一项时，则选中第一项
             d.nextLine(d);
             //self.nextLine(self);
             d.selectCurrentLine(d, true);
             }
             }else d.hideResults(d);
             }else d.hideResults(d);
             } else {
             //无匹配项目时，自动清空用户输入的关键词
             if (d.option.noResultClean) cleanContent(d);
             else{
             if(!d.option.multiple) $(d.elem.hidden).val('');
             }
             d.hideResults(d);
             }
             });
             }
             */
        });
    };

    /**
     * @desc 结果列表的事件处理
     */
    SelectPage.prototype.eResultList = function () {
        var self = this;
        $(self.elem.results).children('li').mouseenter(function () {
            if (self.prop.key_select) {
                self.prop.key_select = false;
                return;
            }
//            if (!$(this).hasClass(self.css_class.selected) && !$(this).hasClass('sp_message_box')) {
                $(this).addClass(self.css_class.select);
                self.setCssFocusedResults(self);
//            }
        }).mouseleave(function () {
            $(this).removeClass(self.css_class.select);
        }).click(function (e) {
            if (self.prop.key_select) {
                self.prop.key_select = false;
                return;
            }
            e.preventDefault();
            e.stopPropagation();

//            if (!$(this).hasClass(self.css_class.selected))
                self.selectCurrentLine(self, false);
        });
    };

    /**
     * @desc 分页导航按钮的事件处理
     */
    SelectPage.prototype.ehNaviPaging = function () {
        var self = this;
        if (!self.option.pagination)
            return;
        $('li.csFirstPage', $(self.elem.navi)).off('click').on('click', function (ev) {
            //$(self.elem.combo_input).focus();
            ev.preventDefault();
            self.firstPage(self);
        });

        $('li.csPreviousPage', $(self.elem.navi)).off('click').on('click', function (ev) {
            //$(self.elem.combo_input).focus();
            ev.preventDefault();
            self.prevPage(self);
        });

        $('li.csNextPage', $(self.elem.navi)).off('click').on('click', function (ev) {
            //$(self.elem.combo_input).focus();
            ev.preventDefault();
            self.nextPage(self);
        });

        $('li.csLastPage', $(self.elem.navi)).off('click').on('click', function (ev) {
            //$(self.elem.combo_input).focus();
            ev.preventDefault();
            self.lastPage(self);
        });
    };

    /**
     * @desc Ajax请求失败的处理
     * @param {Object} self - 插件内部对象
     * @param {string} errorThrown - Ajax的错误输出内容
     */
    SelectPage.prototype.ajaxErrorNotify = function (self, errorThrown) {
        self.showMessage(self.message.ajax_error);
    };

    /**
     * @desc 交互消息显示
     * @param {Object} self - 插件内部对象
     * @param msg {string} 需要提示的文本
     */
    SelectPage.prototype.showMessage = function (self, msg) {
        if (!msg)
            return;
        var msgLi = '<li class="sp_message_box"><i class="fa fa-exclamation-triangle"></i> ' + msg + '</li>';
        $(self.elem.results).empty().append(msgLi);
        self.calcResultsSize(self);
        $(self.elem.container).addClass(self.css_class.container_open);
        $(self.elem.control).hide();
        if (self.option.pagination)
            $(self.elem.navi).hide();
    };

    /**
     * @desc 窗口滚动处理
     * @param {Object} self - 插件内部对象
     * @param {boolean} enforce - 是否定位到输入框的位置
     */
    SelectPage.prototype.scrollWindow = function (self, enforce) {
        var current_result = self.getCurrentLine(self);

        var target_top = (current_result && !enforce) ? current_result.offset().top : $(self.elem.container).offset().top;
        var target_size;

        self.prop.size_li = $(self.elem.results).children('li:first').outerHeight();
        target_size = self.prop.size_li;

        var client_height = $(window).height();
        var scroll_top = $(window).scrollTop();
        var scroll_bottom = scroll_top + client_height - target_size;

        // 滚动处理
        var gap;
        if ($(current_result).length) {
            if (target_top < scroll_top || target_size > client_height) {
                //滚动到顶部
                gap = target_top - scroll_top;
            } else if (target_top > scroll_bottom) {
                //向下滚动
                gap = target_top - scroll_bottom;
            } else
                return; //不进行滚动
        } else if (target_top < scroll_top)
            gap = target_top - scroll_top;
        window.scrollBy(0, gap);
    };

    /**
     * @desc 输入框获得焦点的样式设置
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.setCssFocusedInput = function (self) {
        //$(self.elem.results).addClass(self.css_class.re_off);
        //$(self.elem.combo_input).removeClass(self.css_class.input_off);
    };

    /**
     * @desc 设置结果列表高亮，输入框失去焦点
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.setCssFocusedResults = function (self) {
        //$(self.elem.results).removeClass(self.css_class.re_off);
        //$(self.elem.combo_input).addClass(self.css_class.input_off);
    };

    /**
     * @desc 输入框输入值的变化监控
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.checkValue = function (self) {
        var now_value = $(self.elem.combo_input).val();
        if (now_value != self.prop.prev_value) {
            self.prop.prev_value = now_value;
            self.prop.first_show = false;

            if (self.option.selectOnly)
                self.setButtonAttrDefault();
            if (!self.option.multiple && !now_value) {
                self.clearAll(self);
                $(self.elem.clear_btn).remove();
            }

            self.suggest(self);
        }
    };

    /**
     * @desc 文本输入框键盘事件处理（普通字符输入处理）
     * @param {Object} self - 插件内部对象
     * @param {Object} e - 事件event对象
     */
    SelectPage.prototype.processKey = function (self, e) {
        if ($.inArray(e.keyCode, [37, 38, 39, 40, 27, 9, 13]) === -1) {
            if (e.keyCode != 16)
                self.setCssFocusedInput(self); // except Shift(16)
            self.inputResize(self);
            if ($.type(self.option.data) === 'string') {
                self.prop.last_input_time = e.timeStamp;
                setTimeout(function () {
                    if ((e.timeStamp - self.prop.last_input_time) === 0)
                        self.checkValue(self);
                }, self.option.inputDelay * 1000);
            } else {
                self.checkValue(self);
            }
        }
    }

    /**
     * @desc 文本输入框键盘事件处理（控制键处理）
     * @param {Object} self - 插件内部对象
     * @param {Object} e - 事件event对象
     */
    SelectPage.prototype.processControl = function (self, e) {
        if (($.inArray(e.keyCode, [37, 38, 39, 40, 27, 9]) > -1 && $(self.elem.result_area).is(':visible')) ||
                ($.inArray(e.keyCode, [13, 9]) > -1 && self.getCurrentLine(self))) {
            e.preventDefault();
            e.stopPropagation();
            e.cancelBubble = true;
            e.returnValue = false;
            switch (e.keyCode) {
                case 37:
                    // left
                    if (e.shiftKey)
                        self.firstPage(self);
                    else
                        self.prevPage(self);
                    break;

                case 38:
                    // up
                    self.prop.key_select = true;
                    self.prevLine(self);
                    break;

                case 39:
                    // right
                    if (e.shiftKey)
                        self.lastPage(self);
                    else
                        self.nextPage(self);
                    break;

                case 40:
                    // down
                    if ($(self.elem.results).children('li').length) {
                        self.prop.key_select = true;
                        self.nextLine(self);
                    } else
                        self.suggest(self);
                    break;

                case 9:
                    // tab
                    self.prop.key_paging = true;
                    self.selectCurrentLine(self, true);
                    //self.hideResults(self);
                    break;

                case 13:
                    // return
                    self.selectCurrentLine(self, true);
                    break;

                case 27:
                    //  escape
                    self.prop.key_paging = true;
                    self.hideResults(self);
                    break;
            }
        }
    };

    /**
     * @desc 中断Ajax请求
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.abortAjax = function (self) {
        if (self.prop.xhr) {
            self.prop.xhr.abort();
            self.prop.xhr = false;
        }
    };

    /**
     * @desc 数据查询
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.suggest = function (self) {
        //搜索关键字
        var q_word;
        var val = $.trim($(self.elem.combo_input).val());
        if (self.option.multiple)
            q_word = val;
        else {
            if (val && val === self.prop.selected_text)
                q_word = '';
            else
                q_word = val;
        }
        q_word = q_word.split(/[\s　]+/);
        self.abortAjax(self);
        self.setLoading(self);
        var which_page_num = self.prop.current_page > 0 ? self.prop.current_page : 1;

        // 数据查询
        if (typeof self.option.data == 'object')
            self.searchForJson(self, q_word, which_page_num);
        else
            self.searchForDb(self, q_word, which_page_num);
    };

    /**
     * @private
     * @desc 读取中状态显示
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.setLoading = function (self) {
        //加载中的状态提示
        if ($(self.elem.results).html() === '') {
            //self.calcResultsSize(self);
            $(self.elem.container).addClass(self.css_class.container_open);
        }
    };

    /**
     * @desc 服务端数据查询
     * @param {Object} self - 插件内部对象
     * @param {Array} q_word - 查询关键字
     * @param {number} which_page_num - 目标页
     */
    SelectPage.prototype.searchForDb = function (self, q_word, which_page_num) {
        if(typeof dosomething == "function"){
            self.option.eAjaxSuccess = dosomething;
        }
        if (!self.option.eAjaxSuccess || !$.isFunction(self.option.eAjaxSuccess))
            self.hideResults(self);
        /**
         * 增加自定义查询参数
         */
        var _paramsFunc = self.option.params;
        var _params = {};
        //原始参数
        var searchKey = self.option.searchField;
        //若有查询关键字，则重置当前页码为1
        if (q_word.length > 0 && q_word[0] && q_word[0] !== self.prop.prev_value)
            which_page_num = 1;
        var _orgParams = {
            q_word: q_word,
            pageNumber: which_page_num,
            pageSize: self.option.pageSize,
            andOr: self.option.andOr,
            orderBy: self.option.orderBy,
            searchTable: self.option.dbTable,
            page: which_page_num,
            per_page: self.option.pageSize,
            and_or: self.option.andOr,
            order_by: self.option.orderBy,
            field: self.option.showField,
            pkey_name: self.option.keyField,
            search_field: searchKey
        };
        _orgParams[searchKey] = q_word[0];
        if (_paramsFunc) {
            var result = $.isFunction(_paramsFunc) ? _paramsFunc() : _paramsFunc;
            if (result && $.isPlainObject(result)) {
                _params = $.extend({}, _orgParams, result);
            } else {
                _params = _orgParams;
            }
        } else {
            _params = _orgParams;
        }
        //增加自定义查询参数End
        self.prop.xhr = $.ajax({
            dataType: 'json',
            url: self.option.data,
            type: 'POST',
            data: _params,
            success: function (returnData) {
                if (!returnData || !$.isPlainObject(returnData)) {
                    self.hideResults(self);
                    self.ajaxErrorNotify(self);
                    return;
                }
                var data;
                if (self.option.eAjaxSuccess && $.isFunction(self.option.eAjaxSuccess)) {
                    data = self.option.eAjaxSuccess(returnData);
                } else {
                    data = returnData;
                }

                //数据结构处理
                var json = {};
                json.originalResult = data.list;
                json.cnt_whole = typeof data.total !== 'undefined' ? data.total : (typeof data.totalRow !== 'undefined' ? data.totalRow : data.list.length);

                json.candidate = [];
                json.keyField = [];
                if (typeof json.originalResult != 'object') {
                    self.prop.xhr = null;
                    self.notFoundSearch(self);
                    return;
                }
                json.cnt_page = json.originalResult.length;
                for (var i = 0; i < json.cnt_page; i++) {
                    for (var key in json.originalResult[i]) {
                        if (key == self.option.keyField) {
                            json.keyField.push(json.originalResult[i][key]);
                        }
                        if (key == self.option.showField) {
                            json.candidate.push(json.originalResult[i][key]);
                        }
                    }
                }
                self.prepareResults(self, json, q_word, which_page_num);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if (textStatus != 'abort') {
                    self.hideResults(self);
                    self.ajaxErrorNotify(self, errorThrown);
                }
            },
            complete: function () {
                self.prop.xhr = null;
            }
        });
    };

    /**
     * @desc 对JSON源数据进行搜索
     * @param {Object} self - 插件内部对象
     * @param {Array} q_word - 搜索关键字
     * @param {number} which_page_num - 目标页数
     */
    SelectPage.prototype.searchForJson = function (self, q_word, which_page_num) {
        var matched = [];
        var esc_q = [];
        var sorted = [];
        var json = {};
        var i = 0;
        var arr_reg = [];

        //查询条件过滤
        do {
            //'/\W/g'正则代表全部不是字母，数字，下划线，汉字的字符
            //将非法字符进行转义
            esc_q[i] = q_word[i].replace(/\W/g, '\\$&').toString();
            arr_reg[i] = new RegExp(esc_q[i], 'gi');
            i++;
        } while (i < q_word.length);

        // SELECT * FROM data WHERE field LIKE q_word;
        for (i = 0; i < self.option.data.length; i++) {
            var flag = false;
            var row = self.option.data[i];
            for (var j = 0; j < arr_reg.length; j++) {
                var itemText = row[self.option.showField];//默认获取showField字段的文本
                if (self.option.formatItem && $.isFunction(self.option.formatItem))
                    itemText = self.option.formatItem(row);
                if (itemText.match(arr_reg[j])) {
                    flag = true;
                    if (self.option.andOr == 'OR')
                        break;
                } else {
                    flag = false;
                    if (self.option.andOr == 'AND')
                        break;
                }
            }
            if (flag)
                matched.push(row);
        }

        // (CASE WHEN ...) 然后 く order 指定列
        var reg1 = new RegExp('^' + esc_q[0] + '$', 'gi');
        var reg2 = new RegExp('^' + esc_q[0], 'gi');
        var matched1 = [];
        var matched2 = [];
        var matched3 = [];
        for (i = 0; i < matched.length; i++) {
            var orderField = self.option.orderBy[0][0];
            var orderValue = String(matched[i][orderField]);
            if (orderValue.match(reg1)) {
                matched1.push(matched[i]);
            } else if (orderValue.match(reg2)) {
                matched2.push(matched[i]);
            } else {
                matched3.push(matched[i]);
            }
        }

        if (self.option.orderBy[0][1].match(/^asc$/i)) {
            matched1 = self.sortAsc(self, matched1);
            matched2 = self.sortAsc(self, matched2);
            matched3 = self.sortAsc(self, matched3);
        } else {
            matched1 = self.sortDesc(self, matched1);
            matched2 = self.sortDesc(self, matched2);
            matched3 = self.sortDesc(self, matched3);
        }
        sorted = sorted.concat(matched1).concat(matched2).concat(matched3);

        //若没有匹配项目，则结束搜索
        /*
         if (sorted.length === undefined || sorted.length === 0 ) {
         self.notFoundSearch(self);
         return;
         }
         */
        json.cnt_whole = sorted.length;
        //page_move参数用于区别数据加载是在初始化列表还是在进行分页的翻页操作
        if (!self.prop.page_move) {
            //仅单选模式进行选中项目定位页功能
            if (!self.option.multiple) {
                //若控件当前已有选中值，则获得该项目所在的页数，并跳转到该页进行显示
                var currentValue = $(self.elem.hidden).val();
                if ($.type(currentValue) !== 'undefined' && $.trim(currentValue) !== '') {
                    var index = 0;
                    $.each(sorted, function (i, row) {
                        if (row[self.option.keyField] == currentValue) {
                            index = i + 1;
                            return false;
                        }
                    });
                    which_page_num = Math.ceil(index / self.option.pageSize);
                    if (which_page_num < 1)
                        which_page_num = 1;
                    self.prop.current_page = which_page_num;
                }
            }
        } else {
            //过滤后的数据个数不足一页显示的个数时，强制设置页码
            if (sorted.length <= ((which_page_num - 1) * self.option.pageSize)) {
                which_page_num = 1;
                self.prop.current_page = 1;
            }
        }

        // LIMIT xx OFFSET xx
        var start = (which_page_num - 1) * self.option.pageSize;
        var end = start + self.option.pageSize;
        //储存原始行数据，包括所有属性
        json.originalResult = [];
        // 查询后的数据处理
        for (i = start; i < end; i++) {
            if (sorted[i] === undefined)
                break;
            json.originalResult.push(sorted[i]);
            for (var key in sorted[i]) {
                if (key == self.option.keyField) {
                    if (json.keyField === undefined)
                        json.keyField = [];
                    json.keyField.push(sorted[i][key]);
                }
                if (key == self.option.showField) {
                    if (json.candidate === undefined)
                        json.candidate = [];
                    json.candidate.push(sorted[i][key]);
                }
            }
        }

        if (json.candidate === undefined)
            json.candidate = [];
        json.cnt_page = json.candidate.length;
        self.prepareResults(self, json, q_word, which_page_num);
    };

    /**
     * @desc 升序排序
     * @param {Object} self - 插件内部对象
     * @param {Array} arr - 结果集数组
     */
    SelectPage.prototype.sortAsc = function (self, arr) {
        arr.sort(function (a, b) {
            var valA = a[self.option.orderBy[0][0]];
            var valB = b[self.option.orderBy[0][0]];
            return $.type(valA) === 'number' ? valA - valB : String(valA).localeCompare(String(valB));
        });
        return arr;
    };

    /**
     * @desc 降序排序
     * @param {Object} self - 插件内部对象
     * @param {Array} arr - 结果集数组
     */
    SelectPage.prototype.sortDesc = function (self, arr) {
        arr.sort(function (a, b) {
            var valA = a[self.option.orderBy[0][0]];
            var valB = b[self.option.orderBy[0][0]];
            return $.type(valA) === 'number' ? valB - valA : String(valB).localeCompare(String(valA));
        });
        return arr;
    };

    /**
     * @desc 查询无结果的处理
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.notFoundSearch = function (self) {
        $(self.elem.results).empty();
        self.calcResultsSize(self);
        $(self.elem.container).addClass(self.css_class.container_open);
        self.setCssFocusedInput(self);
    };

    /**
     * @desc 查询结果处理
     * @param {Object} self - 插件内部对象
     * @param {Object} json - 数据结果
     * @param {Array} q_word - 查询关键字
     * @param {number} which_page_num - 目标页
     */
    SelectPage.prototype.prepareResults = function (self, json, q_word, which_page_num) {
        //处理分页栏
        if (self.option.pagination)
            self.setNavi(self, json.cnt_whole, json.cnt_page, which_page_num);

        if (!json.keyField)
            json.keyField = false;

        //仅选择模式
        if (self.option.selectOnly && json.candidate.length === 1 && json.candidate[0] == q_word[0]) {
            $(self.elem.hidden).val(json.keyField[0]);
            this.setButtonAttrDefault();
        }
        //是否是输入关键词进行查找
        var is_query = false;
        if (q_word && q_word.length > 0 && q_word[0])
            is_query = true;
        //显示结果列表
        self.displayResults(self, json, is_query);
    };

    /**
     * @desc 生成分页栏
     * @param {Object} self - 插件内部对象
     * @param {number} cnt_whole - 数据总条数
     * @param {number} cnt_page - 页面显示记录数
     * @param {number} page_num - 当前页数
     */
    SelectPage.prototype.setNavi = function (self, cnt_whole, cnt_page, page_num) {
        /**
         * 生成分页条
         */
        var buildPageNav = function (self, pagebar, page_num, last_page) {
            if ($('li', $(pagebar)).size() == 0) {
                $(pagebar).empty();
                //处理当当前页码为1时，首页和上一页按钮不允许点击
                var btnclass = '', isNewFontAwesome = true;
                //判断是否使用了font-awesome3.2.1
                $.each(document.styleSheets, function (i, n) {
                    if (n && n.href && n.href.indexOf('font-awesome-3.2.1') != -1) {
                        isNewFontAwesome = false;
                        return false;
                    }
                });
                //为不同版本图标设置样式
                var iconFist = 'fa fa-angle-double-left', iconPrev = 'fa fa-angle-left', iconNext = 'fa fa-angle-right', iconLast = 'fa fa-angle-double-right';
                if (!isNewFontAwesome) {
                    iconFist = 'icon-step-backward';
                    iconPrev = 'icon-backward';
                    iconNext = 'icon-forward';
                    iconLast = 'icon-step-forward';
                }

                if (page_num == 1)
                    btnclass = ' disabled ';
                //首页
                $(pagebar).append('<li class="csFirstPage' + btnclass + '" title="' + self.message.first_title + '" ><a href="javascript:void(0);"> <i class="' + iconFist + '"></i> </a></li>');
                //上一页
                $(pagebar).append('<li class="csPreviousPage' + btnclass + '" title="' + self.message.prev_title + '" ><a href="javascript:void(0);"><i class="' + iconPrev + '"></i></a></li>');
                var pageInfo = '第 ' + page_num + ' 页(共' + last_page + '页)';
                //设置分页信息
                $(pagebar).append('<li class="pageInfoBox"><a href="javascript:void(0);"> ' + pageInfo + ' </a></li>');

                if (page_num == last_page)
                    btnclass = ' disabled ';
                else
                    btnclass = '';
                //首页
                $(pagebar).append('<li class="csNextPage' + btnclass + '" title="' + self.message.next_title + '" ><a href="javascript:void(0);"><i class="' + iconNext + '"></i></a></li>');
                //上一页
                $(pagebar).append('<li class="csLastPage' + btnclass + '" title="' + self.message.last_title + '" ><a href="javascript:void(0);"> <i class="' + iconLast + '"></i> </a></li>');
            }
        };

        var pagebar = $(self.elem.navi);
        var last_page = Math.ceil(cnt_whole / self.option.pageSize); //计算总页数
        if (last_page == 0)
            page_num = 0;
        else {
            if (last_page < page_num)
                page_num = last_page;
            else if (page_num == 0)
                page_num = 1;
        }
        self.prop.current_page = page_num;//更新当前页参数
        self.prop.max_page = last_page;//更新总页数参数
        buildPageNav(self, pagebar, page_num, last_page);
        //刷新分页信息
        var pageInfoBox = $('li.pageInfoBox', $(pagebar));

        var pageInfo = '第 ' + page_num + ' 页(共' + last_page + '页)';
        $(pageInfoBox).html('<a href="javascript:void(0);"> ' + pageInfo + ' </a>');
        //更新分页样式
        var dClass = 'disabled';
        var first = $('li.csFirstPage', $(pagebar));
        var previous = $('li.csPreviousPage', $(pagebar));
        var next = $('li.csNextPage', $(pagebar));
        var last = $('li.csLastPage', $(pagebar));
        //处理首页，上一页按钮样式
        if (page_num === 1 || page_num === 0) {
            if (!$(first).hasClass(dClass))
                $(first).addClass(dClass);
            if (!$(previous).hasClass(dClass))
                $(previous).addClass(dClass);
        } else {
            if ($(first).hasClass(dClass))
                $(first).removeClass(dClass);
            if ($(previous).hasClass(dClass))
                $(previous).removeClass(dClass);
        }
        //处理下一页，最后一页按钮的样式
        if (page_num == last_page || last_page == 0) {
            if (!$(next).hasClass(dClass))
                $(next).addClass(dClass);
            if (!$(last).hasClass(dClass))
                $(last).addClass(dClass);
        } else {
            if ($(next).hasClass(dClass))
                $(next).removeClass(dClass);
            if ($(last).hasClass(dClass))
                $(last).removeClass(dClass);
        }

        if (last_page > 1)
            self.ehNaviPaging(); //导航按钮的事件设置
    };

    /**
     * @desc 显示结果集列表
     * @param {Object} self - 插件内部对象
     * @param {Object} json 源数据
     * @param {boolean} is_query - 是否是通过关键字搜索（用于区分是鼠标点击下拉还是输入框输入关键字进行查找）
     */
    SelectPage.prototype.displayResults = function (self, json, is_query) {
        $(self.elem.results).empty();
        if (self.option.multiple && $.type(self.option.maxSelectLimit) === 'number' && self.option.maxSelectLimit > 0) {
            var selectedSize = $('li.selected_tag', self.elem.element_box).size();
            if (selectedSize > 0 && selectedSize >= self.option.maxSelectLimit) {
                self.showMessage(self, '最多只能选择 ' + self.option.maxSelectLimit + ' 个项目');
                return;
            }
        }

        if (json.candidate.length > 0) {
            var arr_candidate = json.candidate;
            var arr_primary_key = json.keyField;
            var keystr = $(self.elem.hidden).val();
            var keyArr = keystr ? keystr.split(',') : new Array();
            for (var i = 0; i < arr_candidate.length; i++) {
                var itemText = '';
                if (self.option.formatItem && $.isFunction(self.option.formatItem)) {
                    try {
                        itemText = self.option.formatItem(json.originalResult[i]);
                    } catch (e) {
                        console.error('formatItem内容格式化函数内容设置不正确！');
                        itemText = arr_candidate[i];
                    }
                } else
                    itemText = arr_candidate[i];
                //XSS対策
                var list = $('<li>').html(itemText).attr({
                    pkey: arr_primary_key[i],
                    title: itemText
                });

                //选中项目设置高亮样式
                if ($.inArray(arr_primary_key[i].toString(), keyArr) !== -1) {
                    $(list).addClass(self.css_class.selected);
                }
                //缓存原始行对象
                $(list).data('dataObj', json.originalResult[i]);
                $(self.elem.results).append(list);
            }
        } else {
            var li = '<li class="sp_message_box"><i class="fa fa-exclamation-triangle"></i> ' + self.message.not_found + '</li>';
            $(self.elem.results).append(li);
        }

        if (self.option.multiple && self.option.multipleControlbar)
            $(self.elem.control).show();
        if (self.option.pagination)
            $(self.elem.navi).toggleClass("hide", json.cnt_whole <= json.cnt_page);

        //显示结果集列表并调整位置
        self.calcResultsSize(self);
        $(self.elem.container).addClass(self.css_class.container_open);

        //结果集列表事件绑定
        self.eResultList();
        //若是键盘输入关键字进行查询且有内容时，列表自动选中第一行(autoSelectFirst为true时)
        if (is_query && json.candidate.length > 0 && self.option.autoSelectFirst)
            self.nextLine(self);
    };

    /**
     * @desc 处理结果列表尺寸及位置
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.calcResultsSize = function (self) {
        var rePosition = function () {
            if ($(self.elem.container).css('position') === 'static') {
                // position: static
                var offset = $(self.elem.combo_input).offset();
                $(self.elem.result_area).css({
                    top: offset.top + $(self.elem.combo_input).outerHeight() + 'px',
                    left: offset.left + 'px'
                });
            } else {
                if (!self.option.pagination) {
                    var itemHeight = $('li:first', self.elem.results).outerHeight(true);
                    var listHeight = itemHeight * self.option.listSize;
                    $(self.elem.results).css({
                        'max-height': listHeight,
                        'overflow-y': 'auto'
                    });
                }

                //在展示下拉列表时，判断默认与输入框左对齐的列表是否会超出屏幕边界，是则右对齐，否则默认左对齐
                var docWidth = $(document).width();
                var docHeight = $(document).height();//文档全部高度
                var viewHeight = $(window).height();//可视区域高度
                var offset = $(self.elem.container).offset();
                var screenScrollTop = $(window).scrollTop();
                var listWidth = $(self.elem.result_area).outerWidth();
                //当前状态，列表并未被显示，数据未被填充，列表并未展现最终高度，所以只能使用默认一页显示10条数据的固定高度进行计算
                var listHeight = $(self.elem.result_area).outerHeight();
                //默认方向的坐标，在多选模式下，因为外框架是DIV，所以需要向左靠一个像素
                var defaultLeft = self.option.multiple ? -1 : 0;
                //输入框高度
                var inputHeight = $(self.elem.container).outerHeight();
                var left = (offset.left + listWidth) > docWidth ? -(listWidth - $(self.elem.container).outerWidth()) : defaultLeft;
                //控件在全文档范围中的实际TOP（非当前可视区域中的相对TOP）
                var screenTop = offset.top;//$(self.elem.container).scrollTop();//offset.top - screenScrollTop;
                var top = 0, dist = 5;//设置偏移量，让列表与输入框有5px的间距
                //列表展开后的坐标高度
                var listBottom = screenTop + inputHeight + listHeight + dist;
                var hasOverflow = docHeight > viewHeight;

                if ((screenTop - screenScrollTop - dist > listHeight) &&
                        (hasOverflow && listBottom > (viewHeight + screenScrollTop)) ||
                        (!hasOverflow && listBottom > viewHeight)) {
                    //控件当前位置+控件高度+列表高度超过实际body高度
                    //列表则需要向上展示
                    top = -(listHeight + 1) - dist;
                    $(self.elem.result_area).removeClass('shadowUp shadowDown').addClass('shadowUp');
                } else {
                    //列表正常向下展示
                    top = self.option.multiple ? $(self.elem.container).innerHeight() + 1 : $(self.elem.container).outerHeight();
                    $(self.elem.result_area).removeClass('shadowUp shadowDown').addClass('shadowDown');
                    top += dist;
                }
                /*
                 $(self.elem.result_area).css({
                 top : top + 'px',
                 left: left + 'px'
                 });
                 */
                return {
                    top: top + 'px',
                    left: left + 'px'
                };
            }
        };
        if ($(self.elem.result_area).is(':visible')) {
            $(self.elem.result_area).css(rePosition());
        } else {
            $(self.elem.result_area).show(1, function () {
                $(this).css(rePosition());
            });
        }
    };

    /**
     * @desc 隐藏结果列表
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.hideResults = function (self) {
        if (self.prop.key_paging) {
            self.scrollWindow(self, true);
            self.prop.key_paging = false;
        }
        self.setCssFocusedInput(self);

        if (self.option.autoFillResult) {
            //self.selectCurrentLine(self, true);
        }

        $(self.elem.results).empty();
        $(self.elem.result_area).hide();
        $(self.elem.container).removeClass(self.css_class.container_open);

        self.abortAjax(self);
        self.setButtonAttrDefault(); // 按钮title属性初期化
    };

    /**
     * @desc 跳转到首页
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.firstPage = function (self) {
        if (self.prop.current_page > 1) {
            self.prop.current_page = 1;
            self.prop.page_move = true;
            self.suggest(self);
        }
    };

    /**
     * @desc 跳转到上一页
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.prevPage = function (self) {
        if (self.prop.current_page > 1) {
            self.prop.current_page--;
            self.prop.page_move = true;
            self.suggest(self);
        }
    };

    /**
     * @desc 跳转到下一页
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.nextPage = function (self) {
        if (self.prop.current_page < self.prop.max_page) {
            self.prop.current_page++;
            self.prop.page_move = true;
            self.suggest(self);
        }
    };

    /**
     * @desc 跳转到尾页
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.lastPage = function (self) {
        if (self.prop.current_page < self.prop.max_page) {
            self.prop.current_page = self.prop.max_page;
            self.prop.page_move = true;
            self.suggest(self);
        }
    };
    /**
     * @desc 跳转到指定页
     * @param {Object} self
     * @param {number} page 目标页数
     */
    SelectPage.prototype.goPage = function (self, page) {
        if (typeof (page) === 'undefined')
            page = 1;
        if (self.prop.current_page < self.prop.max_page) {
            self.prop.current_page = page;
            self.prop.page_move = true;
            self.suggest(self);
        }
    };
    /**
     * @desc 操作结束后的一些收尾工作
     */
    SelectPage.prototype.afterAction = function (self) {
        self.inputResize(self);
        $(self.elem.combo_input).trigger("change");
        $(self.elem.hidden).trigger("change");
        self.setCssFocusedInput(self);
        if (self.option.multiple) {
            if (self.option.selectToCloseList) {
                self.hideResults(self);
                $(self.elem.combo_input).blur();
            } else {
                self.suggest(self);
                $(self.elem.combo_input).focus();
            }
        } else {
            self.hideResults(self);
            $(self.elem.combo_input).blur();
        }
    };

    /**
     * @desc 选择当前行
     * @param {Object} self - 插件内部对象
     * @param {boolean} is_enter_key - 是否为回车键
     */
    SelectPage.prototype.selectCurrentLine = function (self, is_enter_key) {
        self.scrollWindow(self, true);

        var current = self.getCurrentLine(self);
        if (current) {
            if (!self.option.multiple) {
                $(self.elem.combo_input).val($(current).text());
                $(self.elem.hidden).val($(current).attr('pkey'));
            } else {
                //多选模式的项目选择处理
                $(self.elem.combo_input).val('');
                var item = {text: $(current).text(), value: $(current).attr('pkey')};
                if (!self.isAlreadySelected(self, item)) {
                    self.addNewTag(self, item);
                    self.tagValuesSet(self);
                }
            }

            if (self.option.selectOnly)
                self.setButtonAttrDefault();

            //项目选择回调函数触发
            if (self.option.eSelect && $.isFunction(self.option.eSelect))
                self.option.eSelect($(current).data('dataObj'));

            self.prop.prev_value = $(self.elem.combo_input).val();
            self.prop.selected_text = $(self.elem.combo_input).val();

            self.putClearButton();
        }
        self.afterAction(self);
    };
    /**
     * 单选模式下选中项目后，显示清空按钮
     */
    SelectPage.prototype.putClearButton = function () {
        if (!this.option.multiple && !$(this.elem.combo_input).prop('disabled'))
            $(this.elem.container).append(this.elem.clear_btn);
    };
    /**
     * @desc 全选当前页的行
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.selectAllLine = function (self) {
        var jsonarr = new Array();
        $('li', self.elem.results).each(function (i, row) {
            var item = {text: $(row).text(), value: $(row).attr('pkey')};
            if (!self.isAlreadySelected(self, item)) {
                self.addNewTag(self, item);
                self.tagValuesSet(self);
            }
            jsonarr.push($(row).data('dataObj'));
            //若有最大选择数量限制，则添加最大个数后，不再添加
            if ($.type(self.option.maxSelectLimit) === 'number' &&
                    self.option.maxSelectLimit > 0 &&
                    self.option.maxSelectLimit === $('li.selected_tag', self.elem.element_box).size()) {
                return false;
            }
        });
        if (self.option.eSelect && $.isFunction(self.option.eSelect))
            self.option.eSelect(jsonarr);
        self.afterAction(self);
    };
    /**
     * @desc 取消选择本页全部项目
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.unselectAllLine = function (self) {
        var size = $('li', self.elem.results).size();
        $('li', self.elem.results).each(function (i, row) {
            var key = $(row).attr('pkey');
            var tag = $('li.selected_tag[itemvalue="' + key + '"]', self.elem.element_box);
            self.removeTag(self, tag);
        });
        self.afterAction(self);
        if (self.option.eTagRemove && $.isFunction(self.option.eTagRemove))
            self.option.eTagRemove(size);
    };
    /**
     * @desc 清除所有选中的项目
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.clearAll = function (self) {
        var size = 0;
        if (self.option.multiple) {
            size = $('li.selected_tag', self.elem.element_box).size();
            $('li.selected_tag', self.elem.element_box).remove();
        }
        $(self.elem.combo_input).val('');
        $(self.elem.hidden).val('');
        self.afterAction(self);
        if (self.option.multiple) {
            if (self.option.eTagRemove && $.isFunction(self.option.eTagRemove))
                self.option.eTagRemove(size);
        }
    };

    /**
     * @desc 获得当前行对象
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.getCurrentLine = function (self) {
        if ($(self.elem.result_area).is(':hidden'))
            return false;
        var obj = $('li.' + self.css_class.select, self.elem.results);
        if ($(obj).size())
            return obj;
        else
            return false;
    };

    /**
     * @desc 多选模式下判断当前选中项目是否已经存在已选中列表中
     * @param {Object} self - 插件内部对象
     * @param {Object} item - 选中行对象
     */
    SelectPage.prototype.isAlreadySelected = function (self, item) {
        var isExist = false;
        if (item.value) {
            var keys = $(self.elem.hidden).val();
            if (keys) {
                var karr = keys.split(',');
                if (karr && karr.length > 0 && $.inArray(item.value, karr) != -1)
                    isExist = true;
            }
        }
        return isExist;
    };

    /**
     * @desc 多选模式下增加一个标签
     * @param {Object} self - 插件内部对象
     * @param {Object} item - 选中行对象
     */
    SelectPage.prototype.addNewTag = function (self, item) {
        if (!self.option.multiple || !item)
            return;
        var tmp = self.template.tag.content, tag;
        tmp = tmp.replace(self.template.tag.textKey, item.text);
        tmp = tmp.replace(self.template.tag.valueKey, item.value);
        tag = $(tmp);
        if ($(self.elem.combo_input).prop('disabled'))
            $('span.tag_close', tag).hide();
        $(self.elem.combo_input).closest('li').before(tag);
    };
    /**
     * @desc 多选模式下移除一个标签
     * @param {Object} self - 插件内部对象
     * @param {Object} item - 标签对象
     */
    SelectPage.prototype.removeTag = function (self, item) {
        var key = $(item).attr('itemvalue');
        var keys = $(self.elem.hidden).val();
        //从已保存的key列表中删除该标签对应的项目
        if ($.type(key) != 'undefined' && keys) {
            var keyarr = keys.split(',');
            var index = $.inArray(key.toString(), keyarr);
            if (index != -1) {
                keyarr.splice(index, 1);
                $(self.elem.hidden).val(keyarr.toString());
            }
        }
        $(item).remove();
        self.inputResize(self);
    };

    /**
     * @desc 多选模式下标签结果值放入隐藏域
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.tagValuesSet = function (self) {
        if (!self.option.multiple)
            return;
        var tags = $('li.selected_tag', $(self.elem.element_box));
        if (tags && $(tags).size() > 0) {
            var result = new Array();
            $.each(tags, function (i, li) {
                var v = $(li).attr('itemvalue');
                if ($.type(v) !== 'undefined')
                    result.push(v);
            });
            if (result.length > 0) {
                $(self.elem.hidden).val(result.join(','));
            }
        }
    };

    /**
     * @desc 多选模式下输入框根据输入内容调整输入框宽度
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.inputResize = function (self) {
        if (!self.option.multiple)
            return;
        var width = '';
        var inputLi = self.elem.combo_input.closest('li');
        //设置默认宽度
        var setDefaultSize = function (self, inputLi) {
            inputLi.removeClass('full_width');
            var minimumWidth = self.elem.combo_input.val().length + 1;
            var width = (minimumWidth * 0.75) + 'em';
            self.elem.combo_input.css('width', width);
            self.elem.combo_input.removeAttr('placeholder');
        };
        if ($('li.selected_tag', $(self.elem.element_box)).size() === 0) {
            if (self.elem.combo_input.attr('placeholder_bak')) {
                if (!inputLi.hasClass('full_width'))
                    inputLi.addClass('full_width');
                self.elem.combo_input.attr('placeholder', self.elem.combo_input.attr('placeholder_bak'));
                self.elem.combo_input.removeAttr('style');
            } else
                setDefaultSize(self, inputLi);
        } else
            setDefaultSize(self, inputLi);
    };

    /**
     * @desc 选择下一行
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.nextLine = function (self) {
        var obj = self.getCurrentLine(self);
        var idx;
        if (!obj)
            idx = -1;
        else {
            idx = $(self.elem.results).children('li').index(obj);
            $(obj).removeClass(self.css_class.select);
        }
        idx++;
        if (idx < $(self.elem.results).children('li').length) {
            var next = $(self.elem.results).children('li').eq(idx);
            $(next).addClass(self.css_class.select);
            self.setCssFocusedResults(self);
        } else
            self.setCssFocusedInput(self);
        self.scrollWindow(self, false);
    };

    /**
     * @desc 选择上一行
     * @param {Object} self - 插件内部对象
     */
    SelectPage.prototype.prevLine = function (self) {
        var obj = self.getCurrentLine(self);
        var idx;
        if (!obj)
            idx = $(self.elem.results).children('li').length;
        else {
            idx = $(self.elem.results).children('li').index(obj);
            $(obj).removeClass(self.css_class.select);
        }
        idx--;
        if (idx > -1) {
            var prev = $(self.elem.results).children('li').eq(idx);
            $(prev).addClass(self.css_class.select);
            self.setCssFocusedResults(self);
        } else
            self.setCssFocusedInput(self);
        self.scrollWindow(self, false);
    };


    /**
     * @desc 下拉分页查询控件初始化入口
     * @global
     * @memberof jQuery,bootstrap2,bootstrap3
     * @param option {Object} 初始化参数集
     */
    function Plugin(option) {
        return this.each(function () {
            var $this = $(this),
                    data = $this.data(SelectPage.dataKey),
                    params = $.extend({}, defaults, $this.data(), data && data.option, typeof option === 'object' && option);
            if (!data)
                $this.data(SelectPage.dataKey, (data = new SelectPage(this, params)));
        });
    }

    /**
     * 获得稿件内部对象
     * @param {object} obj 
     * @returns 
     */
    function getPlugin(obj) {
        var container = $(obj).closest('div.sp_container');
        return $('input.sp_input', container);
    }

    /**
     * @desc 清除所有模式下选择的项目
     */
    function ClearSelected() {
        return this.each(function () {
            var $this = getPlugin(this),
                    data = $this.data(SelectPage.dataKey);
            if (data)
                data.clearAll(data);
        });
    }

    /**
     * 刷新选中项目内容
     * 使用场景：使用$().val('xxx')修改插件的选中项目ID，此时需要刷新插件在输入框中的显示文本
     */
    function SelectedRefresh() {
        return this.each(function () {
            var $this = getPlugin(this),
                    data = $this.data(SelectPage.dataKey);
            if (data && data.elem.hidden.val())
                data.setInitRecord(true);
        });
    }

    /**
     * 修改插件数据源
     * 仅在json数据源模式有效
     * @param {array} data
     * @example
     * [{name:'aa',sex:1},{name:'bb',sex:0},{...}]
     */
    function ModifyDataSource(data) {
        return this.each(function () {
            if (data && $.isArray(data) && data.length > 0) {
                var $this = getPlugin(this),
                        plugin = $this.data(SelectPage.dataKey);
                if (plugin) {
                    plugin.clearAll(plugin);
                    plugin.option.data = data;
                }
            }
        });
    }

    /**
     * @desc 获得选中项目的文本
     * @returns {string}
     */
    function GetInputText() {
        var str = '';
        this.each(function () {
            var $this = getPlugin(this), data = $this.data(SelectPage.dataKey);
            if (data)
                str += data.elem.combo_input.val();
        });
        return str;
    }

    /**
     * @desc 获得选中项目的数据
     * @returns {String}
     */
    function GetInputValue() {
        var str = '';
        this.each(function () {
            var $this = getPlugin(this), data = $this.data(SelectPage.dataKey);
            if (data)
                str += data.elem.hidden.val();
        });
        return str;
    }

    var old = $.fn.selectPage;

    $.fn.selectPage = Plugin;
    $.fn.selectPage.Constructor = SelectPage;
    $.fn.selectPageClear = ClearSelected;
    $.fn.selectPageRefresh = SelectedRefresh;
    $.fn.selectPageData = ModifyDataSource;
    $.fn.selectPageText = GetInputText;
    $.fn.selectPageValue = GetInputValue;

    // 处理新旧版本冲突
    // =================
    $.fn.selectPage.noConflict = function () {
        $.fn.selectPage = old;
        return this;
    };
}));