Bootstrap可搜索的下拉菜单

Question

Web开发新手。 我正在使用ASP MVC应用程序。 当前，我正在处理一个表单，需要一个可搜索的下拉框。 在这里，我可以单击下拉菜单，查看所有选择并进行搜索。

此数据将是一个Ajax请求，其中包含Json Objects列表，其属性为Id和Name 。 “ Id ”将是选项值，“ Name ”将是选项名称。

我浏览了与此有关的其余问题，大部分解决方案是围绕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>

谢谢。

Answer 1

Checkout Jquery UI'组合框： https : //jqueryui.com/autocomplete/#combobox