实现一个带搜索的下拉选择框
带搜索的下拉选择框,其实有很多框架实现的。虽然很多框架的下拉选择框都有自己的ajax搜索,但是在显示下拉列表时,必须显示所有数据。开发过程中实现一个带搜索的下拉选择框,问题来了,如果下拉选择框中的数据很多,而且有上百个怎么办?我们要在下拉框中显示数百条数据吗?这样的体验自然是很糟糕的,然后就想到自己做一个简单的下拉选择框,使用起来会简单很多下拉,也方便很多。
在我的例子中下拉,默认只显示5条记录,数据少于10条。当然你也可以自己改,这只是一个例子。
渲染:
具体代码
html
复制
CSS 样式
.form{width: 200px;}
.demo{width: 100%;position: relative;}
.demo input,.box,select{width: 100%;}
.box{display: none;position: absolute;top:24px;border: 1px solid #CCC;background: #FFF;}
ul{list-style: none;margin: 0;padding: 0;}
ul li a{display: block;text-decoration: none;}
ul li a:hover{background: #CCC;}
复制
jQuery
var str = {"11":{"serverid":"11","servername":"天火大道"},"22":{"serverid":"22","servername":"兵界之王"},"33":{"serverid":"33","servername":"斗罗大陆"},"44":{"serverid":"44","servername":"家庭教师"},"55":{"serverid":"55","servername":"兽人战争"},"66":{"serverid":"66","servername":"神话大陆"}};
$(".demo input").click(function(){
var key = $(this).val();
if(key != ""){
searchKey(key);
$(".demo .box").show();
}else{
searchKey(null);
$(".demo .box").toggle();
}
})
$(".list").delegate("a","click",function(){
var text = $(this).text();
$(".demo .text").val(text);
$(".box").hide();
})
$('.text').bind('input propertychange', function() {
var keyword = $(this).val();
if(keyword!=null){
searchKey(keyword)
}
});
var searchKey = function(keyword){
$(".list").empty();
if(keyword == null || keyword == ""){
var i=1;
$.each(str,function(k,v){
if(i<=5){
$(".list").append(""+v.servername+" ");
i++;
}
})
}else{
$.each(str, function(k,v){
var server = v.servername;
if(server.indexOf(keyword)>=0){
$(".list").append(""+v.servername+" ");
}
})
}
}
复制
这只是一个带有关联搜索的简单下拉选择框。如有不足,欢迎提出,大家可以自行优化。
数据量大的时候,我们只显示几条数据,但是搜索的时候,我们在所有的json字符串中搜索,不像大多数框架只能在select的选项中搜索。当然实现一个带搜索的下拉选择框,如果搜索到的数据很多,我们可以加一个判断限制(比如只显示几条数据),请自行添加,剩下的只是一些小的优化和样式调整.
评论前必须登录!
注册