实现一个带搜索的下拉选择框

实现一个带搜索的下拉选择框

带搜索的下拉选择框，其实有很多框架实现的。虽然很多框架的下拉选择框都有自己的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的选项中搜索。当然实现一个带搜索的下拉选择框，如果搜索到的数据很多，我们可以加一个判断限制（比如只显示几条数据），请自行添加，剩下的只是一些小的优化和样式调整.