jQuery实现select模糊查询（反射机制）
程序员文章站
2022-06-01 19:11:28
通过如下代码就可以简单实现select带模糊查询的条件查询，具体如下jquery.select.js如下：
(function($) {
$.selec...
通过如下代码就可以简单实现select带模糊查询的条件查询，具体如下jquery.select.js如下：
(function($) {
$.selectsuggest = function(target, data, itemselectfunction) {
var defauloption = {
suggestmaxheight: '200px',//弹出框最大高度
itemcolor : '#000000',//默认字体颜色
itembackgroundcolor:'rgb(199,237,204)',//默认背景颜色
itemovercolor : '#ffffff',//选中字体颜色
itemoverbackgroundcolor : '#c9302c',//选中背景颜色
itempadding : 3 ,//item间距
fontsize : 12 ,//默认字体大小
alwaysshowall : true //点击input是否展示所有可选项
};
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();
var itemhight=0;
for (var i = 0; i < items.length; i++) {
if(items[i].text.length > maxfontnumber){
maxfontnumber = items[i].text.length;
}
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();
if (currentitem) {
currentitem.trigger("click");
}
currentitem = null;
return;
}
});
$('#' + target).bind("click",
function() {
if (defauloption.alwaysshowall) {
_inititems(data);
} else {
_inititems(inputchange());
}
$('#' + suggestcontainerid).removeattr("style");
var tempwidth = defauloption.fontsize*maxfontnumber + 2 * defauloption.itempadding + 30;
var containerwidth = math.max(tempwidth, suggestcontainerwidth);
var h = this.scrollheight;
$('#' + suggestcontainerid).css({
'border': '1px solid #ccc',
'max-height': '100px',
'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);
html如下：
<!doctype html>
<html lang="zh_cn">
<head>
<title>select.suggest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.select.js"></script>
</head>
<body>
<h1>hello, world!</h1>
<div>
<div>
<div>.col-md-1
</div>
<div style="">
<input id="testinput" type="text" />
</div>
</div>
</div>
<!-- jquery (necessary for bootstrap's javascript plugins) -->
<!-- include all compiled plugins (below), or include individual files as needed -->
</body>
<script type="text/javascript">
var datas =[{"id":"2","text":"中国石油"},
{"id":"4","text":"中国建筑"},
{"id":"3","text":"中国移动"},
{"id":"5","text":"中国工商银行"},
{"id":"7","text":"中国铁建"},
{"id":"8","text":"上海汽车集团"},
{"id":"9","text":"中国建设银行"},
{"id":"10","text":"联想集团"}];
var itemselectfuntion = function(){
alert(this.id + "," + this.innerhtml);
};
$.selectsuggest('testinput',datas,itemselectfuntion);
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。