我们先看一下效果图
下面我们就开始做这个有模糊搜索的下拉框;
首先我们需要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下拉框的模糊查询功能