Asp.net 和 Sql Server Jquery 自动完成数据绑定

Question

如您所见，有一个选择框。我想通过asp net从ms sql数据库中提取数据，但我不知道该怎么做。设计代码如下；

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

在 Jquery 脚本代码中：

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

你可以参考这个链接

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            
});