Ajax jquery autocomplete in ASP.NET MVC 5 C#

Question

I know there's a lot of these kind of post but I wasn't able to find any that suited me. I don't have knowledge of ajax and jquery (in fact I've just started with MVC and ASP.NET) so I need your help in this little thing.

There must be almost everywhere this kind of silly thing, I want to write a city name in a combobox, dropdownlist (or whatever) and using a method that I've already created which returns a list of locations (city, country and state names) that match the entered city. I want it to be dinamyc that's why I thought AJAX would solve this (but any other solution is accepted)

I found this jQuery autocomplete but I don't understand where to implement it. I want the combobox to match the bootstrap theme. Could someone tell me if this is an appropiate solution and if so where do I put the ajax content and else? (by where I mean, is it in the view, or controller or where?)

Or you could give mi a hint here is the method I've created for getting the elements from the database:

public List<LocationsViewModel> GetHeadquarter(string query)
{
    var context = new HeadquarterContext();
    //var city = context.Cities.Where(p => p.Name == query).Single();
    //var province = context.Provinces.Where(p => p.ProvinceID == city.Province).ToList();
    //foreach(Province prov in province) {

    //}
    var hq =
        from c in context.Cities
        join p in context.Provinces on c.Province equals p.ProvinceID
        join co in context.Countries on p.Country equals co.CountryID
        where c.Name == query
        select new { country = co.Name, province = p.Name, city = c.Name };

    List<LocationsViewModel> listLocation = new List<LocationsViewModel>();

    foreach (var hqe in hq)
    {
        LocationsViewModel loc = new LocationsViewModel();
        loc.City = hqe.city;
        loc.Country = hqe.country;
        loc.Province = hqe.province;
        listLocation.Add(loc);
    }
    return listLocation;
}

Answer 1

Lets see if we can get it to work.

View:

This is added in your view, @Url.Action(Action, Controller) is the Action that is the source for the autocomplete function.

<input type="search" class="form-control ui-autocomplete" 
data-autocomplete="@Url.Action("Autocomplete", "Home")" />

Controller (Home):

As you can see the Action Autocomplete was used to search for a product. I have an instance of my database entity called '_db' and have select a table called 'product_data' (can also use a Stored Procedure). I'm using LINQ to query the datasource and store it in the variable 'model', so it's querying where the 'term' StartsWith what is typed in the textbox, it takes the top 10 and for each one it add label and product. [{"label":value}]

public ActionResult Autocomplete(string term)
{
    try
    {
        var model = _db.product_data // your data here
            .Where(p => p.product.StartsWith(term))
            .Take(10)
            .Select(p => new
            {
                // jQuery UI needs the label property to function 
                label = p.product.Trim()
            });

        // Json returns [{"label":value}]
        return Json(model, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        Settings.ReportException(ex);
        return Json("{'ex':'Exception'}");
    }
}

JavaScript:

This code is when you select a value from the list that is displayed from your search. The 'window.location.href' redirects to a different controller once a value from the autocomplete has been selected.

// submits form upon selecting a value
var submitAutocompleteForm = function (event, ui) {
    var $input = $(this); // the HTML element (Textbox)

    // selected value
    $input.val(ui.item.label); // ui.item.label = the label value (product)

    window.location.href = "/Product/Details?id=" + ui.item.label; 
};

The next function sets up the autocomplete API. You declare your options, the above is optional and it comes under select, the source is required and it points to the data-attribute on the HTML element.

var createAutocomplete = function () {
    var $input = $(this); // the HTML element (Textbox)

    var options = {
        // selecting the source by finding elements with the 'data-' attribute
        source: $input.attr("data-autocomplete"), // Required
        select: submitAutocompleteForm // Optional
    };

    // apply options
    $input.autocomplete(options);
};

// targets input elements with the 'data-' attributes and each time the input changes
// it calls the 'createAutocomplete' function
$("input[data-autocomplete]").each(createAutocomplete);

You'll have to reference the jQueryUI file for autocomplete to work.