ASP.NET MVC JQuery自动完成TextBox不起作用

时间:2018-05-22 14:03:09

标签: javascript jquery asp.net-mvc razor jquery-ui-autocomplete

我有一个学生列表,我正在尝试实现一个自动完成的搜索栏。

这是我的控制器方法

[HttpPost]
public ActionResult SearchForStudents(StudentViewModel studentViewModel)
{
    return PartialView("_StudentListTable", 
_repository.GetStudentViewModel(studentViewModel.SearchStudent));
}

public JsonResult AutoComplete(string term)
{
    var model = _repository.FetchGeneralStudentSearchResult(term);
    return Json(model, JsonRequestBehavior.AllowGet);
}

搜索时调用SearchForStudents方法(此部分工作正常)。现在,不起作用的部分是AutoComplete方法。每次用户在搜索框中键入内容时,都会调用此方法。但它并没有被称为..永远..

这是我的剃刀观点

@using Bulletin.Models
@model Bulletin.Models.StudentViewModel

@using (Ajax.BeginForm("SearchForStudents", "Admin", null, new AjaxOptions {             
HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId =         
"StudentTableList" }))
{
    @Html.TextBoxFor(model => model.SearchStudent, "", new { @type = 
"string", @data_autocomplete_source = Url.Action("AutoComplete") })
    <input type="submit" name="searchbt" value="Search" />
}

<hr />
<div id="StudentTableList">
    @Html.Partial("_StudentListTable")
</div>


@section Scripts{
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/MonScript.js"></script>
}

这是“MonScript.js”文件,据说负责检测输入并调用方法

$(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({ source: target.attr("data_autocomplete_source") });
    });
});

所以我的问题我猜是为什么它不起作用,我可以做些什么来解决这个问题?提前感谢您的帮助:D

编辑:这是剃刀被解释为

<form action="/Admin/SearchForStudents" data-ajax="true" data-ajax- 
method="POST" data-ajax-mode="replace" data-ajax-update="#StudentTableList" 
id="form0" method="post">
    <input data-autocomplete-source="/Admin/AutoComplete" id="SearchStudent" 
     name="SearchStudent" type="string" value="" />    
    <input type="submit" name="searchbt" value="Search" />
</form>

编辑2:浏览器的控制台向我发送异常

Uncaught TypeError: this.source is not a function
    at $.(anonymous function).(anonymous function)._search 
(http://localhost:49741/Scripts/jquery-ui-1.12.1.js:6015:8)
    at $.(anonymous function).(anonymous function)._search 
(http://localhost:49741/Scripts/jquery-ui-1.12.1.js:144:25)
    at $.(anonymous function).(anonymous function).search 
(http://localhost:49741/Scripts/jquery-ui-1.12.1.js:6007:15)
    at $.(anonymous function).(anonymous function).search 
(http://localhost:49741/Scripts/jquery-ui-1.12.1.js:144:25)
    at $.(anonymous function).(anonymous function).<anonymous> 
(http://localhost:49741/Scripts/jquery-ui-1.12.1.js:5988:10)
    at handlerProxy (jquery-ui-1.12.1.js:641)

0 个答案:

没有答案