手把手教你自己写一个模糊搜索的下拉框

我们先看一下效果图

下面我们就开始做这个有模糊搜索的下拉框；

首先我们需要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="<input  class=\"form-control\" id=\"_"+nodeId+"\" type=\"text\" style=\"margin-left:-205px;width: 180px;\"></input>" +
                       "<div id=\"_wyb"+nodeId+"\" style=\"width: 200px;height: 106px;border: 1px #ccc solid;position: absolute;background-color: #fff;display:none;\"></div>";
             $(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(' <option value="" selected="selected">--请选择--</option>');
	    		for(var i=0;i<data.length;i++){
	    			if(CData==data[i].DictID){
	    				$(""+nodeId+"").append('<option value="'+data[i].DictID+'" selected="selected">'+data[i].DictCName+'</option>');
	    			}else{
	    				$(""+nodeId+"").append('<option value="'+data[i].DictID+'">'+data[i].DictCName+'</option>');
	    			}
	    		}
	    	}else{
                $("#"+nodeId+" option").remove(); 
	    		$("#"+nodeId+"").append(' <option value="" selected="selected">--请选择--</option>');
	    		for(var i=0;i<data.length;i++){
	    			if(CData==data[i].DictID){
	    				$("#"+nodeId+"").append('<option value="'+data[i].DictID+'" selected="selected">'+data[i].DictCName+'</option>');
	    				 $("#_"+nodeId+"").val(data[i].DictCName); 
	    			}else{
	    				$("#"+nodeId+"").append('<option value="'+data[i].DictID+'">'+data[i].DictCName+'</option>');
	    			}
	    		}
	    	}
        },
        error:function(data){
        	window.top.alert("服务器异常");
        }
	});
}

//加载模糊搜索框  wyb
function 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.length;i++){
        		html+="<div onmousemove=\"getcssmove(this)\"  onmouseout=\"getcssout(this)\" onclick=\"addsearch(this,'"+nodeId+"')\" wyb=\""+data[i].DictID+"\">"+data[i].DictCName+"</div>";
    		}
	    	$("#_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 之后引入，

   <script src="${pageContext.request.contextPath}/js/WYButil.js" ></script>

再引入css 样式包

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/WYButil.css">

然后在html 中你要添加模糊查询的下拉框上加一个属性DictCatID

<select class="" name="name" DictCatID="DictCatID" id="id" style="width: 200px"></select>

在js中这样初始化一下

$(function(){
//没有值初始化的时候
$("#id").WYBBoxInput('','id');
//如果要返显数据
//$("#id").WYBBoxInput(val,'id');

});

这样就实现了select下拉框的模糊查询功能

手把手教你自己写一个模糊搜索的下拉框

猜你喜欢