Uncaught TypeError: $(...).autocomplete is not a function in ASP.MVC application

Question

我有一个简单的 ASP.NET MVC Index 页面，我想在其中包含自动完成搜索文本框。我也包括参考。但它仍然显示相同的错误。我的页面看起来像：

@model IEnumerable<TestProject.Models.Test>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.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" />
    <script type="text/javascript">
        $(function () {
            $("#txtCustomer").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                debugger;
                                return {
                                    value: item.FName,
                                    id: item.Id
                                };
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (event, ui) {
                    debugger;
                    $("#hfCustomer").val(ui.item.value);
                    $("#hfCustomer").val(ui.item.id);
                },
                minLength: 1
            });
        });

    </script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{

    <form class="form-inline">
        <div class="form-group">
            <label for="Search">Search</label>
            <input type="text" class="form-control" id="txtCustomer" name="CustomerName" placeholder="Search">
            <input type="hidden" id="hfCustomer" name="CustomerId" class="form-control">
        </div>
        <input type="submit" id="btnSubmit" value="Search" class="btn btn-info" />
    </form>

}

如果我输入这段代码，我可以正常工作，但它会删除 ASP.NET MVC 提供的默认样式。

@{

Layout = null;
}

我已用谷歌搜索但找不到合适的解决方案。请帮我解决这个问题。提前谢谢你。

Answer 1

感谢您的建议。我已将所有 JavaScript 代码放入

@section scripts
{

}

现在对我有用了。谢谢大家。

Uncaught TypeError: $(...).autocomplete is not a function in ASP.MVC application

Uncaught TypeError: $(...).autocomplete is not a function in ASP.MVC application

asp.net-mvc

jquery

model

asp.net-ajax

razor