Bootstrap Searchable下载

时间:2017-04-04 20:51:50

标签: javascript jquery twitter-bootstrap

Web开发新手。我正在开发一个ASP MVC应用程序。目前,我正在处理一个表格,我需要一个可搜索的下拉框。我可以点击下拉列表查看所有选项并搜索它。

此数据将是一个Ajax请求,其中包含一个Json对象列表,其属性为 Id 名称。 “ ID ”将是选项值,“名称”将是选项名称。

我查看了有关此问题的其余部分,主要是围绕Angular和ASP Web Forms的解决方案。

我没有使用Angular,请提供解决方案,我可以使用Bootstarp和Jquery来完成同样的工作。任何外部插件建议?

以下是当前代码:

<h1 class="col-sm-10 text-center">Data Import</h1>
<hr class="col-sm-10"/>
<form class="col-sm-10 form-horizontal">
    <div class="form-group">
        <label for="test" class="control-label col-sm-2">Name</label>
        <div class="col-sm-10">
            <select class="col-sm-10 form-control" id="tenantList">
                <option value="1">Value</option>
            </select>
        </div>
    </div>
</form>

<script>
    $.ajax({
        url: 'api/Tenant'
    })
    .done(function (data) {
         $('#tenantList').html("");
         var list = "";
         $(data).each(function(idx, object) {
             list += "<option value = " + object.id + ">"+object.name+"</option>";
         });
         $('#tenantList').html(list);
    })
    .fail(function() {
        console.log("Problem :(");        
    });
</script>

感谢。

1 个答案:

答案 0 :(得分:0)

Checkout Jquery UI'Combobox: https://jqueryui.com/autocomplete/#combobox