jQuery可搜索下拉框_Select下拉框带模糊搜索功能

本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