Как использовать ASP.NET для получения данных из MSSQL для виджета автозаполнения JQuery

Question

Я загрузил jquery-ui для использования виджета автозаполнения и хочу получить элементы из базы данных MSSQL.Но я не мог понять, как использовать его в ASP.NET с SQL.Коды в основном, как показано ниже.

        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $("#autocomplete").autocomplete({
            source: availableTags
        });

 <div>
        <input id="autocomplete" title="type &quot;a&quot;">
    </div>

РЕДАКТИРОВАТЬ: Просто узнайте, как это сделать.Просто скопировал jquery на сервер с кодом ниже:

StringBuilder strScript = new StringBuilder();
        strScript.Append("var availableTags = ['java','javascript'];");
        strScript.Append("$('#autocomplete').autocomplete({");
        strScript.Append("source: availableTags});");
        Page.ClientScript.RegisterStartupScript(this.GetType(), "Script",
        strScript.ToString(), true);

Answer 1

Сначала вам нужно написать внутреннюю часть кода, чтобы получить данные из SQL.Затем вы вызовете эту функцию с помощью JQuery, и вам нужно будет установить эти значения в качестве источника автозаполнения.

Таким образом, ваш код автозаполнения должен выглядеть следующим образом.

$("#YourAutoCompleteInputId").autocomplete({
    autoFocus: true, 
    delay: 0,
    scrollIntoView: false,
    source: function (request, response) {
        $.get("/YourControllerName/YourControllerMethod/", { searchTerm: request.term }, function (data) {
            response($.map(data, function (item) {
                return {
                    label: item.Name 
                    val: item.Id
                }
            }));
        }).fail(function () {
            alert("error");
        });
    },
    select: function (event, ui) {
        // whatever you return from your back-end code. you can reach here
        // you can reach it by using ui.item.label => it's your label and ui.item.val => is your value. 
        // do something when user select one the result from autocomplete list.
    },
    open: function () {
        // do something when user open autocomplete list
    },
    close: function () {
        // do something when user close autocomplete list
    }
});

И ваш метод должен быть таким.

public async Task<JsonResult> GetApplicantNamesForAutoComplete(string searchTerm)
{
    var list = yourData.Where(x => x.yourTableColumnName.Contains(searchTerm))
        .Select(x => new { x.Id, Name = (x.FirstName + " " + x.LastName)});
    return Json(await list.ToListAsync(), JsonRequestBehavior.AllowGet);
}