(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 = $('
'); //创建一个子
} 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 = $('
'); //创建一个子
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);