jQuery可搜索下拉框_Select下拉框带模糊搜索功能
2016-04-07 13:01:20  By: dwtedx

本Demo是一款在下拉框中嵌入搜索框的动态提示效果、会通过用户的输入内容通过ajax过滤加载下拉框的提示内容、加载的内容可通过ajax动态读取、也可以用固定数据、对用户体验的提高非常有用、Demo的代码是支持选项搜索过滤和Ajax远程加载的select下拉选择框的jQuery插件、效果图如下

下拉框搜索


Html代码

<div class="cell">
    <div class="desc">这个例子从file.json加载数据。不带初始选项。带搜索过滤功能。</div>
    <select id="select3" style="width: 100%;">
        <option value="-1">---</option>
    </select>
</div>
<div class="cell">
    <div class="desc">这个例子从file.json加载数据。带初始选项。不带搜索过滤功能。</div>
    <select id="select5" style="width: 340px;">
        <option value="1">abc</option>
    </select>
</div>


JS代码

/* This parser won´t respect "---" selection */
function dataParserA(data, selected) {
    retval = [ { val: "-1" , text: "---" } ];

    data.forEach(function(v){
        if(selected == "-1" && v.val == 3)
            v.selected = true;
        retval.push(v); 
    });

    return retval;
}

/* This parser let´s the component to handle selection */
function dataParserB(data, selected) {
    retval = [ { val: "-1" , text: "---" } ];
    data.forEach(function(v){ retval.push(v); });
    return retval;
}

/* Create select elements */
$("#select3").tinyselect({ dataUrl: "file.json" , dataParser: dataParserA });
$("#select5").tinyselect({ dataUrl: "file.json" , dataParser: dataParserB });

$("#havoc").show()


ajax加载下拉框搜索框源代码下载链接: 点击下载ajax加载下拉框搜索框源码 密码: s3bf

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+