Pulse7
7/16/2017 - 12:42 PM

Autocomplete with jqueryui

Autocomplete with jqueryui

<form method="get" action=@Url.Action("Index") data-otf-ajax="true" data-otf-target="#restaurantList" >
            <input type="text" name="search" value="" data-otf-autocomplete=@Url.Action("Autocomplete") />
            <input type="submit" value="Search by name" />
        </form>
public ActionResult Autocomplete(string term)
{
    var model = db.Restaurants
        .Where(r => r.Name.StartsWith(term))
        .Take(10)
        .Select(r => new { label = r.Name });
    return Json(model, JsonRequestBehavior.AllowGet);
}
$(function () {
    var createAutocomplete = function () {
        $input = $(this);
        var options = {
            source: $input.attr("data-otf-autocomplete")
        }
        $input.autocomplete(options);
    }

    $("input[data-otf-autocomplete]").each(createAutocomplete);
})