我们先看一下效果图
下面我们就开始做这个有模糊搜索的下拉框；
首先我们需要jquery的支持；然后我们将这个模糊搜索扩展到jquery 中，方便以后使用
直接上代码：/下拉框数据处理//wyb//例子： $("#id").WYBBoxInput('','id');//$("#id").WYBComBox('',id);//((function($){ $.fn.WYBBoxInput = function(CData,nodeId){ var CatID=$(this).attr("DictCatID"); var DictCatID=GetDictCatID(CatID); var url="你自己的后台路径"; var url2= "你自己的后台路径"; var html="" + " "; $(this).parent().append(html); this.change(function(){ $("#_"+nodeId+"").val($("#"+nodeId+" option:selected").text()); }); $("#_"+nodeId+"").keyup(function(){ var DictCName=$(this).val(); URLActionSearch(DictCName,url2,DictCatID,nodeId); }); $("#_"+nodeId+"").focus(function(){ $("#_wyb"+nodeId+"").show(); }); $("#_"+nodeId+"").blur(function(){ setTimeout(function(){ $("#_wyb"+nodeId+"").hide(); }, 200); }); URLA(CData,url,DictCatID,nodeId); }})(jQuery)
/加载下拉框 wyb 搜索框添加值function URLA(CData,url,DictCatID,nodeId){ $.ajax({ url:url, type:'post', async: false, data:{"DictCatID":DictCatID}, dataType: 'json', success:function(data){ if(nodeId.indexOf("[Sun]")>-1){ $("#"+nodeId+" option").remove(); $(""+nodeId+"").append(' '); for(var i=0;i '+data[i].DictCName+''); }else{ $(""+nodeId+"").append(' '); } } }else{ $("#"+nodeId+" option").remove(); $("#"+nodeId+"").append(' '); for(var i=0;i '+data[i].DictCName+''); $("#_"+nodeId+"").val(data[i].DictCName); }else{ $("#"+nodeId+"").append(' '); } } } }, error:function(data){ window.top.alert("服务器异常"); } });} //加载模糊搜索框 wybfunction URLActionSearch(DictCName,url,DictCatID,nodeId){ $.ajax({ url:url, type:'post', async: false, data:{"DictCatID":DictCatID,"DictCName":DictCName}, dataType: 'json', success:function(data){ var html=""; for(var i=0;i "+data[i].DictCName+""; } $("#_wyb"+nodeId+"").html(html); }, error:function(data){ window.top.alert("服务器异常"); } });} //点击选中的搜索内容添加到输入框和下拉表单中，后面取值保存使用function addsearch(obj,nodeId){ var text=$(obj).html(); var vals=$(obj).attr("wyb"); $("#_"+nodeId+"").val(text); $("#_wyb"+nodeId+"").hide(); $("#"+nodeId+"").WYBComBox(vals,nodeId); var dd=$("#softwareversions").val();}//加载出样式function getcssout(obj){ $(obj).removeClass("searchDiv");}//加载入样式function getcssmove(obj){ $(obj).addClass("searchDiv");} 这个文件命名为WYButil.js
然后我们给模糊查询出来的数据添加一个选中的样式：
我的选中样式是为了符合我的项目整体风格所以加加了一个灰色#ccc;这是加载选中样式的代码：
/*选中时添加的样式*/.searchDiv{ background-color: #ccc;} 然后这个文件命名为：WYButil.css
核心代码就这么多：下面我就说说在代码中怎么使用这个功能
在html 页面引入这个js 工具包，一定要在jquery 之后引入，
再引入css 样式包
然后在html 中你要 添加模糊查询的下拉框上加一个属性DictCatID
在js中这样初始化一下
$(function(){//没有值初始化的时候$("#id").WYBBoxInput('','id');//如果要返显数据//$("#id").WYBBoxInput(val,'id');}); 这样就实现了select下拉框的模糊查询功能