javascript - Html.TextBox 上的自动完成功能不起作用

Question

所以，我进行了大量搜索并浏览了很多教程，尽管我完全按照教程中的方式进行了所有操作，但我似乎无法使其正常工作。有趣的是，我参与了一个项目，我们使用完全相同的解决方案并且它有效。

我的论坛中有一个文本框，用户可以在其中搜索我使用 ajax 以部分 View 形式在 div 中显示结果的所有类别中的线程。这是有效的。

问题是，我希望在用户键入时显示包含当前搜索词的线程主题(以普通字符串的形式)，但我似乎无法正确实现自动完成功能。顺便说一句，我正在从 MSSQL 数据库检索我的信息。

这是我用来自动完成的 javascript(不起作用)，在下面您可以看到我用于搜索的 Ajax 表单(起作用):

<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>

@*Scripts for  Ajax to show the partial view in the div with id "partialThreads" at request*@
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>



<script type="text/javascript">
    $(function () {

        $("#txtSearch").autocomplete({
            source: '@Url.Action("GetThreadsBySearch", "Forum")'
        });
    });

</script>


@using (@Ajax.BeginForm("Threads", new AjaxOptions() { UpdateTargetId = "partialThreads", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }))
{
    @Html.AntiForgeryToken()
    <p><strong>Search for thread in all categories</strong></p>
    @Html.TextBox("searchTerm", null, new { id = "txtSearch", style = "width: 1000px" })
    <input type="submit" value="Search" />
}

这是我以部分 View 形式显示搜索结果的 div:

<div id="partialThreads">

</div>

这是我用于 ajax 形式搜索的操作方法(工作方法):

    [HttpPost, ValidateAntiForgeryToken]
    public ActionResult Threads(string searchTerm)
    {
        var model = string.IsNullOrWhiteSpace(searchTerm)
            ? new List<ThreadsListModel>()
            : _threadRepo.GetThreadsBySearch(searchTerm).OrderByDescending(x => x.DateCreated).ToList();

        return PartialView("_Threads", model);
    }

这是我用来检索自动完成信息的方法(我尝试在其上设置断点，它甚至没有中断):

    public JsonResult GetThreadsBySearch(string term)
    {
        var threadNames = _threadRepo.GetThreadsBySearch(term).Select(x => x.Subject).ToList();
        return Json(threadNames, JsonRequestBehavior.AllowGet);
    } 

请注意，我使用相同的数据库查询来搜索表单和自动完成(唯一的区别是我在 GetThreadsBySearch 方法中选择线程名称作为列表。这样就可以了”这不是问题(？)。如果您想查看的话，这是查询方法:

    public ICollection<ThreadsListModel> GetThreadsBySearch(string subject)
    {
        using (var context = new ForumContext())
        {
            return
                context.Threads.Where(x => x.Subject.ToLower().Contains(subject.ToLower()) && x.IsActive)
                    .Select(x => new ThreadsListModel()
                    {
                        ID = x.ID,
                        DateCreated = x.DateCreated,
                        CreatedBy = x.CreatedBy,
                        Subject = x.Subject,
                        PostsCount = x.Posts.Count
                    }).Distinct().ToList();
        }
    }

此外，我正在使用 Visual Studio 2015 (.NET 4.5.2) MVC 5。我希望我没有忘记写下任何有用的信息。

Answer 1

您的脚本顺序错误，jquery 需要位于 jquery-ui 之前(并确保您没有任何重复的脚本)