jQuery实现select模糊查询（反射机制）
通过如下代码就可以简单实现select带模糊查询的条件查询，具体如下jquery.select.js如下：
(function($){
$.selectSuggest=function(target,data,itemSelectFunction){
vardefaulOption={
suggestMaxHeight:'200px',//弹出框最大高度
itemColor:'#000000',//默认字体颜色
itemBackgroundColor:'RGB(199,237,204)',//默认背景颜色
itemOverColor:'#ffffff',//选中字体颜色
itemOverBackgroundColor:'#C9302C',//选中背景颜色
itemPadding:3,//item间距
fontSize:12,//默认字体大小
alwaysShowALL:true//点击input是否展示所有可选项
};
varmaxFontNumber=0;//最大字数
varcurrentItem;
varsuggestContainerId=target+"-suggest";
varsuggestContainerWidth=$('#'+target).innerWidth();
varsuggestContainerLeft=$('#'+target).offset().left;
varsuggestContainerTop=$('#'+target).offset().top+$('#'+target).outerHeight();
varshowClickTextFunction=function(){
$('#'+target).val(this.innerText);
currentItem=null;
$('#'+suggestContainerId).hide();
}
varsuggestContainer;
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();
varitemHight=0;
for(vari=0;i<items.length;i++){
if(items[i].text.length>maxFontNumber){
maxFontNumber=items[i].text.length;
}
varsuggestItem=$('<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);
}
}
varinputChange=function(){
varinputValue=$('#'+target).val();
inputValue=inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");
varmatcher=newRegExp(inputValue,"i");
return$.grep(data,
function(value){
returnmatcher.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");
vartempWidth=defaulOption.fontSize*maxFontNumber+2*defaulOption.itemPadding+30;
varcontainerWidth=Math.max(tempWidth,suggestContainerWidth);
varh=this.scrollHeight;
$('#'+suggestContainerId).css({
'border':'1pxsolid#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如下：
<!DOCTYPEhtml>
<htmllang="zh_cn">
<head>
<title>select.suggest</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--Bootstrap-->
<scriptsrc="js/jquery-1.10.2.js"></script>
<scriptsrc="js/jquery.select.js"></script>
</head>
<body>
<h1>Hello,world!</h1>
<div>
<div>
<div>.col-md-1
</div>
<divstyle="">
<inputid="testInput"type="text"/>
</div>
</div>
</div>
<!--jQuery(necessaryforBootstrap'sJavaScriptplugins)-->
<!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded-->
</body>
<scripttype="text/javascript">
vardatas=[{"id":"2","text":"中国石油"},
{"id":"4","text":"中国建筑"},
{"id":"3","text":"中国移动"},
{"id":"5","text":"中国工商银行"},
{"id":"7","text":"中国铁建"},
{"id":"8","text":"上海汽车集团"},
{"id":"9","text":"中国建设银行"},
{"id":"10","text":"联想集团"}];
varitemSelectFuntion=function(){
alert(this.id+","+this.innerHTML);
};
$.selectSuggest('testInput',datas,itemSelectFuntion);
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。