如何在.net core mvc的搜索框中实现自动完成功能？

Posted 2023-04-01

【中文标题】如何在.net core mvc的搜索框中实现自动完成功能？

【英文标题】：how to implement autocomplete functionality in search box in .net core mvc?

【发布时间】：2021-04-14 06:19:06

【问题描述】：

我尝试在视图的搜索框中添加自动完成或建议功能，因为当有人输入任何字符时，包含该字符的任何单词都会显示为建议，但这不起作用。我遵循了不同的教程，但无法解决它。请看一看，给我指路。 提前谢谢。

控制器

 public async Task<IActionResult> dashboard(string sortOrder, string SearchString)
        
            ViewData["NameSortParm"] = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
           
            var movies = from m in _context.Movie
                         select m;
            if (!String.IsNullOrEmpty(SearchString))
            
                movies = movies.Where(s => s.MovieName.Contains(SearchString));
            
            switch (sortOrder)
            
                case "name_desc":
                    movies = movies.OrderByDescending(s => s.MovieName);
                    break;
                
                default:
                    movies = movies.OrderBy(s => s.MovieName);
                    break;
            
            return View(await movies.AsNoTracking().ToListAsync());
        
        
 
         public JsonResult AutoComplete(string prefix)  
         
             var customers = (from movie in this._context.Movie
                              where movie.MovieName.StartsWith(prefix)
                              select new
                              
                                  label = movie.MovieName,
                                  val = movie.Id
                              ).ToList();

             return Json(customers);
         

dashboard.cshtml

@model IEnumerable<WebApplication1.Models.Movie>

@
    ViewData["Title"] = "dashboard";
    Layout = "~/Views/Shared/_Layout.cshtml";


<h1>Dashboard</h1>
@using (Html.BeginForm())

<p>
    Find by Movie Name:  @Html.TextBox("SearchString")
    <input type="hidden" id="hfCustomer" name="Id" />
    <input type="submit" value="Search" />
</p>


<table class="table">
    <thead>
        <tr>
            <th>
                <a asp-action="dashboard" asp-route-sortOrder="@ViewData["NameSortParm"]">@Html.DisplayNameFor(model => model.MovieName)</a>
            </th>

            

            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.MovieName)
                </td>
               </tr>
        
    </tbody>
</table>

<script type="text/javascript">
        $(function () 
            $("#txtMovie").autocomplete(
                source: function (request, response) 
                    $.ajax(
                        url: '/Movies/AutoComplete/',
                        data:  "prefix": request.term ,
                        type: "POST",
                        success: function (data) 
                            response($.map(data, function (item) 
                                return item;
                            ))
                        ,
                        error: function (response) 
                            alert(response.responseText);
                        ,
                        failure: function (response) 
                            alert(response.responseText);
                        
                    );
                ,
                select: function (e, i) 
                    $("#hfCustomer").val(i.item.val);
                ,
                minLength: 1
            );
        );
</script>

【参考方案1】：

我尝试在视图的搜索框中添加自动完成或建议功能，因为当有人输入任何字符时，包含该字符的任何单词都会显示为建议，但这不起作用。

Find by Movie Name:  @Html.TextBox("SearchString")

如果您在浏览器中查看上述TextBox的html源代码，您会发现它呈现如下。

id 属性的值是“SearchString”，而不是“txtMovie”。您可以尝试修改代码以使用$("#SearchString") 选择器，如下所示。

$("#SearchString").autocomplete(
    //...
    //code logic here
    //...  

带有测试数据的测试结果

注意：请确保添加对所需 jquery 库的引用。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

【讨论】：

您现在能更详细地说明一下这个问题吗？输入任何字符时不会触发自动完成吗？还是导致客户端或服务器出现错误？

触发自动完成，但结果未显示在视图中。

浏览器网络标签中是否有对/Movies/AutoComplete的请求？

是的，它显示如下标签："a" val: 2 for movie name "a"。

让我们continue this discussion in chat.