I have implemented AutoComplete feature in my MVC application but it doesnt seem to work. Could somebody tell whats wrong with my implementation
The Index View Here I have defined the data attributes for autocomplete
<form method="get" action="@Url.Action("Index")"
data-otf-ajax="true" data-otf-target="#restaurantList" >
<input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("AutoComplete")"/>
<input type="submit" value="Search" />
</form>
@Html.Partial("_Restaurants", Model)
The otf.js file
$(function ()
{
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr("data-otf-target"));
$target.replaceWith(data);
});
};
retu false;
var createAutoComplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-otf-autocomplete")
};
$input.autocomplete(options);
};
$("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
$("input[data-otf-autocomplete]").each(createAutoComplete);
});
The HomeController
public ActionResult AutoComplete(string searchTerm)
{
var model = _db.Restaurants
.Where(r => r.Name.StartsWith(searchTerm))
.Take(10)
.Select(r => new
{
label = r.Name
});
retu Json(model, JsonRequestBehavior.AllowGet);
}
