jQuery自动完成功能未加载

撒拉（Salar Muhammad）

我正在研究自动完成JQuery函数，以在文本框中填充学生姓名。我已经利用了每个相关的JQuery库来使自动完成功能起作用。当我按F12键时，它始终会引发“自动完成不是功能”错误。以下是我正在运行的代码。

StudentBatch.cshtml

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
    <div class="col-md-12">
        @Html.EditorFor(model => model.StudentName, new { id = "StudentName" })

    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        alert("This is autocomplete function");
    });
    $(document).ready(function () {
        $("#StudentName").autocomplete({
            //autocomplete: {
            //    delay: 0,
            //    minLength: 1,
            source: function (request, response) {
                $.ajax({
                    url: "/Student/Create",
                    type: "POST",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        try {
                            response($.map(data, function (item) {
                                return { label: item.StudentName, value: item.StudentName };
                            }))
                        } catch (err) { }
                    }
                })
            },
            messages: {
                noResults: "jhh", results: "jhjh"
            }

        });

    });
</script>

StudentController.cs

[HttpPost]
public JsonResult Create(string Prefix)
{
    CreateUser user = new CreateUser();
    string stdid = "fae30ef0-08b2-4490-a389-3c8eb0a7cc53";
    var StudentList = user.GetAllUsers().ToList().Where(u => u.FirstName == Prefix && u.usertypeid == stdid).ToString();
    return Json(StudentList, JsonRequestBehavior.AllowGet);
}

塞内斯瓦尔

我已经创建了您正在创建的类似演示。

模型

public class CreateUser
 {
     public string StudentName { get; set; }
     public string StudentId { get; set; }
 }

控制者

public class StudentController : Controller
{
    // GET: Student
    public ActionResult Create()
    {
        return View();
    }


    [HttpPost]
    public JsonResult Create(string prefix)
    {
        List<CreateUser> studentList = new List<Models.CreateUser>()
        {
            new CreateUser { StudentId = "1" , StudentName = "Student1"},
            new CreateUser { StudentId = "2" , StudentName = "Student2"},
            new CreateUser { StudentId = "3" , StudentName = "Student3"},
            new CreateUser { StudentId = "4" , StudentName = "Student4"},
            new CreateUser { StudentId = "5" , StudentName = "Student5"},
            new CreateUser { StudentId = "6" , StudentName = "Student6"},
            new CreateUser { StudentId = "7" , StudentName = "Student7"},
        };

        var searchlist = (from student in studentList
            where student.StudentName.Contains(prefix)
            select student).ToList();

        return Json(searchlist, JsonRequestBehavior.AllowGet);
    }
}

视图

@model WebApplication6.Models.CreateUser
@{
    Layout = null;
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
<style>
    .ui-autocomplete {
        max-height: 100px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
    }
    /* IE 6 doesn't support max-height
     * we use height instead, but this forces the menu to always be this tall
     */
    * html .ui-autocomplete {
        height: 100px;
    }

    .ui-autocomplete-input {
        width: 300px;
    }
</style>

<div class="form-group">
    <div class="col-md-12">
        @Html.EditorFor(model => model.StudentName, new { id = "StudentName" })
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $("#StudentName").autocomplete({
            //autocomplete: {
            //    delay: 0,
            //    minLength: 1,
            source: function (request, response)
            {
                $.ajax({
                    url: "/Student/Create",
                    type: "POST",
                    dataType: "json",
                    data: { prefix: request.term },
                    success: function(data) {
                        try {
                            response($.map(data,
                                function (item)
                                {
                                    return { label: item.StudentName, value: item.StudentName };
                                }));
                        } catch (err) {
                        }
                    }
                });
            },
            messages:
                {
                noResults: "jhh", results: "jhjh"
            }

        });

    });
</script>

输出量