雀恰营销
专注中国网络营销推广

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

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

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

    赞(0) 打赏
    未经允许不得转载:雀恰营销 » 实现一个带搜索的下拉选择框
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!

     

    文章对你有帮助就赞助我一下吧

    支付宝扫一扫打赏

    微信扫一扫打赏