CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Alex
Alex

Reputation: 894

Jquery autocomplete suggestion is not showing under textbox and showing at the bottom of the page in ASP.NET MVC

I have a textbox in ASP.Net MVC application at top of my Home page.

    @Html.TextBox("place", Model.place,Model.place, new {id="place", @class = "form-control", @placeholder = "Search by Location" })

I am using Jquery to get suggestions:

     $(document).ready(function () {
    $("#place").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Search/AutoCompleteSearch",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.SearchTerm, value: item.SearchTerm };
                    }))

                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

In my controller i have written the following code:

     public JsonResult AutoCompleteSearch(string term)
    {
        var searchResults = frequentsearchtermService.GetTerms(term);
        return Json(searchResults, JsonRequestBehavior.AllowGet);
    }

While executing my application it is showing suggestions, but instead of just below the text box, it shows after the footer of my page.

Upvotes: 0

Views: 2178

Answers (1)

Alex
Alex

Reputation: 894

for proper working of the above code, need to give reference to the following script and css files:

<link href="~/Content/css/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.10.2.js"></script>
<script src="~/Content/js/jquery-ui.js"></script>

Upvotes: 3

Related Questions