MVC 控件模仿百度或者谷歌，模糊搜索

前端代码：

    类别：
   

       
       

   

jq 调用后台方法：

$(document).ready(function () {
    $("#searchInput").on("input", function () {
        var keyword = $(this).val();

        $.ajax({
            type: "GET",
            url: "/Home/Lookup",
            data: { keyword: keyword },
            success: function (data) {
                updateSuggestions(data);
            }
        });
    });

    function updateSuggestions(suggestions) {
        $("#suggestionsList").empty();

        suggestions.forEach(function (suggestion) {
            $("

")
                .text(suggestion)
                .appendTo("#suggestionsList")
                .click(function () {
                    $("#searchInput").val(suggestion);
                    $("#suggestionsList").empty();
                });
        });
    }
});
后台方法：
[HttpGet]
public async Task Lookup(string keyword)
{
    // 在这里根据搜索关键词term获取智能匹配的搜索结果
    var searchResults = await GetAutocompleteResults(keyword);

    return new JsonResult(searchResults);
}

private async Task?> GetAutocompleteResults(string keyword)
{
    //这里面按照需要的数据源来查询，我这里只是返回我自定义的对象

    List arryList = new List();
    // 方法一：逐个添加元素
    arryList.Add("Element 1");

    arryList.Add("Element 2");

    arryList.Add("Element 3");

    // 方法二：使用集合初始化器

    arryList = new List { "Element 1", "Element 2", "Element 3" };

    // 方法三：通过数组转换为列表

    string[] elements = { "Element 1", "Element 2", "Element 3" };

    arryList = new List(elements);

    // 方法四：使用.AddRange()方法添加多个元素

    string[] moreElements = { "Element 4", "Element 5" };

    arryList.AddRange(moreElements);

    return arryList;
}