Question

I’m having an issue with autocomplete in jquery mobile. I want to create a text input that when the user inputs in it, the cities that correspond with what the user typed in shows up in a drop down menu, similar to how Google Search works.

My problem is that instead of a drop down menu, it just creates a bullet list of all the cities. I have the CSS theme implemented and all the necessary jquery/jquery mobile ui scripts enabled.

After watching the MVC pluralsight tutorial on MVC, I was able to connect to a database of city names and create the following code (these are just snippets):

View

<p>Hotel Location (City): <input type="text" data-autocomplete="@Url.Action("QuickSearch", "Booking")"/></p>

Javascript/Jquery

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

Controller

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

Thanks! I really appreciate the help 🙂

Answer 1

My mistake. I actually forgot to add jquery ui in my layout page! Stupid mistake hahaha