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

Question

So, I've searched alot and went through alot of tutorials and even though I do everything exactly as in the tutorial, I just can't seem to get it working. Funny thing is, I have been involved in a project where we used the exact same solution and it worked.

I've got a textbox in my forum where users can search for threads in all categories where I am using ajax to show the result in a div in form of a partial view. This is working.

The problem is that I want the thread subjects that are containing the current search term to show up (in form of a normal string) while the user is typing, but I can't seem to get the implementation of autocomplete right. By the way I am retrieving my information from a MSSQL-database.

This is the javascript that I am using to autocomplete (which is not working) and below that you can see my Ajax-form that I use for the search (that works):

<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" />
}

Here is the div where I show the results of the search in form of a partial view:

<div id="partialThreads">

</div>

Here is the action method that I am using for my ajax-form search (the working one):

    [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);
    }

And here is the method that I use to retrieve the information to my autocomplete (I've tried setting a break point on it, it doesn't even break):

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

Note that I use the same db-query to search with the form and for the autocomplete (only difference would be that I select the threadnames as a List in the GetThreadsBySearch method. So that can't be the problem (?). Here is query-method in case you want to have a look:

    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();
        }
    }

Also, I am using Visual Studio 2015 (.NET 4.5.2) MVC 5. I hope that I haven't forgot to write down any helpful information.

Answer 1

您的脚本顺序错误， jquery必须在jquery-ui之前（并确保您没有任何重复的脚本）

Answer 2

 $("#MainContent_txtCountry").autocomplete({
    source: function (request, response) {
        var param = { keyword: $('#MainContent_txtCountry').val() };
        $.ajax({
            url: "Default.aspx/GetCountryNames",
            data: JSON.stringify(param),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },

   });