如何解决如何在 .net core mvc 的搜索框中实现自动完成功能?
我尝试在视图的搜索框中添加自动完成或建议功能,因为当有人输入任何字符时,包含该字符的任何单词都会显示为建议,但这不起作用。我遵循了不同的教程,但无法解决它。请看一看,并给我方向。 提前谢谢。
控制器
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>
解决方法
我尝试在视图的搜索框中添加自动完成或建议功能,因为当有人输入任何字符时,包含该字符的任何单词都会显示为建议,但这不起作用。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。