Bootstrap Searchable Drop down

Question

New to web development. I am working on a ASP MVC app. Currently, I am working on a form, where I need a drop down box, that is searchable. Where I can click the drop down and see all the choices and also search it.

The data for this will be an Ajax request, that has a list of Json Objects, with properties Id and Name . " Id " will be the Option value and " Name " will be Option Name.

I looked through rest of the question regarding this, mostly the solutions were around Angular and ASP Web Forms.

I am not using Angular, please suggest solutions where I can use Bootstarp and Jquery to accomplish the same. Any external plugin suggestions?

Below is the current code:

<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>

Thanks.

Answer 1

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