wnserver/obj/static/js/jquery.select.js

(function ($) {
    $.selectSuggest = function (target, data, itemSelectFunction) {
        var defaulOption = {
            suggestMaxHeight: '400px',//弹出框最大高度
            itemColor: '#000000',//默认字体颜色
            itemBackgroundColor: 'RGB(253,250,250)',//默认背景颜色
            itemOverColor: '#ffffff',//选中字体颜色
            itemOverBackgroundColor: '#ea0c3c',//选中背景颜色
            itemPadding: 5,//item间距
            fontSize: 15,//默认字体大小
            alwaysShowALL: true //点击input是否展示所有可选项
        };
        var timer = null;
        var maxFontNumber = 0;//最大字数
        var currentItem;
        var suggestContainerId = target + "-suggest";
        var suggestContainerWidth = $('#' + target).innerWidth();
        var suggestContainerLeft = $('#' + target).offset().left;
        var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();

        var showClickTextFunction = function () {
            $('#' + target).val(this.innerText);
            currentItem = null;
            $('#' + suggestContainerId).hide();
        }
        var suggestContainer;
        if ($('#' + suggestContainerId)[0]) {
            suggestContainer = $('#' + suggestContainerId);
            suggestContainer.empty();
        } else {
            suggestContainer = $('<div></div>'); //创建一个子<div>
        }

        suggestContainer.attr('id', suggestContainerId);
        suggestContainer.attr('tabindex', '0');
        suggestContainer.hide();
        var _initItems = function (items) {
            suggestContainer.empty();
            if (items.length >= 5000) {
                alert("插叙模糊查询到数据超过5000笔，请重新输入精确查询条件")
                return
            }
            for (var i = 0; i < items.length; i++) {
                if (items[i].text.length > maxFontNumber) {
                    maxFontNumber = items[i].text.length;
                }
                // if (Math.round(i % 1000) == 0) {
                //     console.log("被整除了")
                //     timer && clearTimeout(timer);
                //     timer = setTimeout(function () {
                //         console.log("延迟")
                //     }, 1000);
                // }
                var suggestItem = $('<div></div>'); //创建一个子<div>
                suggestItem.attr('id', items[i].id);
                suggestItem.append(items[i].text);
                suggestItem.css({
                    'padding': defaulOption.itemPadding + 'px',
                    'white-space': 'nowrap',
                    'cursor': 'pointer',
                    'background-color': defaulOption.itemBackgroundColor,
                    'color': defaulOption.itemColor
                });
                suggestItem.bind("mouseover",
                    function () {
                        $(this).css({
                            'background-color': defaulOption.itemOverBackgroundColor,
                            'color': defaulOption.itemOverColor
                        });
                        currentItem = $(this);
                    });
                suggestItem.bind("mouseout",
                    function () {
                        $(this).css({
                            'background-color': defaulOption.itemBackgroundColor,
                            'color': defaulOption.itemColor
                        });
                        currentItem = null;
                    });
                suggestItem.bind("click", showClickTextFunction);
                suggestItem.bind("click", itemSelectFunction);
                suggestItem.appendTo(suggestContainer);
                suggestContainer.appendTo(document.body);

            }
        }

        var inputChange = function () {
            var inputValue = $('#' + target).val();
            inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
            var matcher = new RegExp(inputValue, "i");
            return $.grep(data,
                function (value) {
                    return matcher.test(value.text);
                });
        }
        //这里是控制静态查找
        // $('#' + target).bind("keyup",
        //     function () {
        //         _initItems(inputChange());
        //     });
        $('#' + target).bind("blur",
            function () {
                if (!$('#' + suggestContainerId).is(":focus")) {
                    $('#' + suggestContainerId).hide();
                    // console.log("啊啊啊啊被点击")
                    if (currentItem) {
                        currentItem.trigger("click");
                    }
                    currentItem = null;
                    return;
                }
            });

        $('#' + target).bind("click",
            function () {
                if (defaulOption.alwaysShowALL) {
                    // console.log("被点击数据没有变动")
                    // _initItems(data);
                } else {
                    _initItems(inputChange());
                }
                $('#' + suggestContainerId).removeAttr("style");
                var tempWidth = defaulOption.fontSize * maxFontNumber + 2 * defaulOption.itemPadding + 30;
                var containerWidth = Math.max(tempWidth, suggestContainerWidth);
                $('#' + suggestContainerId).css({
                    'border': '1px solid #ccc',
                    'max-height': '400px',  //设置高度
                    'top': suggestContainerTop,
                    'left': suggestContainerLeft,
                    'width': containerWidth,
                    'position': 'absolute',
                    'font-size': defaulOption.fontSize + 'px',
                    'font-family': 'Arial',
                    'z-index': 99999,
                    'background-color': '#FFFFFF',
                    'overflow-y': 'auto',
                    'overflow-x': 'hidden',
                    'white-space': 'nowrap'

                });
                $('#' + suggestContainerId).show();
            });
        _initItems(data);
        $('#' + suggestContainerId).bind("blur",
            function () {
                $('#' + suggestContainerId).hide();
            });

    }
})(jQuery);