(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);