Asp.net und Sql Server Jquery autocomplate Datenbindung

Question

Wie Sie sehen können, gibt es eine Auswahlbox. Ich möchte Daten von MS SQL-Datenbank über ASP-Netz ziehen, aber ich habe keine Ahnung, wie es geht. Der Design-Code ist wie folgt;

<div class="form-group"> 
<label class="form-label">Basics</label> 
<div class="input-group"> 
<span class="input-group-addon"> 
<i class="fa fa-globe"></i> 
</span> 
<input type="text" class="form-control" placeholder="Type for Suggestions" id="typeahead-1"> 
</div> 
</div> 

Im JQuery Skriptcode:

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' 
]; 
$('#typeahead-1').typeahead({ 
hint: true, 
highlight: true, 
minLength: 1 
}, { 
name: 'states', 
displayKey: 'value', 
source: substringMatcher(states) 
}); 

İmage for design

Answer 1

Sie den Link

http://www.encodedna.com/jquery/twitter-bootstrap-typeahead-ajax-example-with-webapi.htm

$('#typeahead-1').typeahead({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/Home/Country/" + request, 
      dataType: "json", 
      type: "GET", 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
       var arrCountry = []; 
       response($.map(data, function (item) { 
        arrCountry.push(item.CountryName); 
       })) 
       response(arrCountry);      
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus); 
      } 
     }); 
    }, 
    hint: true,    
    highlight: true,  
    minLength: 1    
});