手把手教你本身寫一個模糊搜索的下拉框

咱們先看一下效果圖

下面咱們就開始作這個有模糊搜索的下拉框；

首先咱們須要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下拉框的模糊查詢功能