Ajax AutoComplete Search Doesn't Show Results

Question

I'm trying to implement my first every quick-search feature that shows possible results in a dropdown as you type. I think I'm really close. But for some reason, the quick results just don't show in the browser.

Here's the code in the View:

@using (Ajax.BeginForm("Search", "Home", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.ReplaceWith,
    UpdateTargetId = "searchResults"
}))
{
    <input type="text" name="q" data-autocomplete="@Url.Action("QuickSearch", "Home")" />
    <input type="submit" value="Search" />
}

<table id="searchResults"></table>

And then the HTML that is sent to the browser:

<form action="/Home/Search" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace-with" data-ajax-update="#searchResults" id="form0" method="post">
    <input type="text" name="q" data-autocomplete="/Home/QuickSearch" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
    <input type="submit" value="Search">
</form>

<table id="searchResults"></table>

I can put a break point over the method in the controller that queries the DB, and using Watch, I can see that it brings back accurate results with each key press:

    public ActionResult QuickSearch(string term)
    {
        var restaurants = _db.Restaurants
                             .Where(r => r.Name.Contains(term))
                             .Take(10)
                             .Select(r => new { label = r.Name });
        return Json(restaurants, JsonRequestBehavior.AllowGet);
    }

And finally, here's the JavaScript that should tie it all together:

/// <reference path="jquery-1.4.4-vsdoc.js" />
/// <reference path="jquery-ui.js" />
/// <reference path="jQuery.tmpl.js" />

$(document).ready(function () {

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

$("#searchForm").submit(function () {
    $.getJSON($(this).attr("action"),  // the url to get JSON from
              $(this).serialize(),     // make q=yellow, for example
              function (data) {      // what to do with the response
                  var result = $("#searchTemplate").tmpl(data);
                  $("#searchResults").empty()
                             .append(result);
              }
        );
        return false;
    });
})

I am including the scripts:

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

Also... this may be part of the same issue... Not only do the quick-results not show in the dropdown under the screen, but when I click "Search", the results show in an empty screen, and not in the original View as expected.

score 1 · Answer 1 · answered Sep 29 '15 at 14:41

1

In your example you return object with property from Controller and jquery autocomplete don't understand it.

Change this:

.Select(r => new { label = r.Name });

To this:

.Select(r => r.Name );

And everything will work

answered Sep 29 '15 at 14:41

teo van kot

12,350
10
38
70

Thank you for the tip! I really appreciate it. I made the change, but it still isn't working. I should have said in my OP (I will edit it) that not only do the quick-results not show up in the dropdown under the search box, but... when I click on "Search" the results are displayed on an empty screen, and not inside the view as expected. – Casey Crookston Sep 29 '15 at 14:45
@CaseyCrookston i don't get, you have problem with autocomplete or with your search in general? – teo van kot Sep 29 '15 at 14:57
Yeah, it seems to be the AutoComplete that isn't working. I think it might be because of mis-matched jquery script files. – Casey Crookston Sep 29 '15 at 15:16

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

If you want to take this further then there is a plugin called Select2 that might be useful.

I have an answered question that covered the implementation (both JS and controller) of this with a database here:

Fill Select2 dropdown box from database in MVC 4

My solution to that covers a lot of the same ground that you're working with in your implementation. Hope it helps!

edited May 23 '17 at 12:33

Community

1
1

answered Sep 29 '15 at 14:54

Whiplash450

943
2
12
22

score 1 · Accepted Answer · answered Sep 29 '15 at 15:51

1

The problem turned out to be a miss-match between jquery files. I downloaded the latest versions of jquery, jquery-ui, and jquery.unobtrusive, and then it worked.

answered Sep 29 '15 at 15:51

Casey Crookston

13,016
24
107
193

Ajax AutoComplete Search Doesn't Show Results

3 Answers3