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

Question

I have simple ASP.NET MVC Index page where I want to include autocomplete search textbox. I have included reference also. But still its showing the same error. My page looks like:

@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>

}

If i put this code then i works fine but it removes default style provided by ASP.NET MVC.

@{

Layout = null;
}

I have googled it but could not found appropriate solution. Please help me to resolve this issues. Thank you in advance.

Answer 1

Thank you for your suggestions. I have put all the JavaScript code inside the

@section scripts
{

}

and it worked for me now. Thank you guys.