MVC Bootstrap: Autocomplete doesn't show properly
- by kicked11
I have a MVC website and it had a searchbox with autocomplete, now I changed the layout using bootstrap. But now the autocomplete isn't been shown correctly anymore. See the picture the suggestions are not shown right.
the autocomplete goes through the text. I was fine before I used bootstrap.
I am using a SQL server to get the data and this is js file (I'm not good at ajax, i took it from a tutorial I followed)
$(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-aptitude-target"));
var $newHtml = $(data);
$target.replaceWith($newHtml);
$newHtml.show("slide", 200);
});
return false;
};
var submitAutocompleteForm = function (event, ui) {
var $input = $(this);
$input.val(ui.item.label);
var $form = $input.parents("form:first");
$form.submit();
};
var createAutocomplete = function () {
var $input = $(this);
var options = {
source: $input.attr("data-aptitude-autocomplete"),
select: submitAutocompleteForm
};
$input.autocomplete(options);
};
$("form[data-aptituder-ajax='true']").submit(ajaxFormSubmit);
$("input[data-aptitude-autocomplete]").each(createAutocomplete);
});
this is the form in my view
<form method="get" action="@Url.Action("Index")"
data-aptitude-ajax="true" data-aptitude-target="#testList">
<input type="search" name="searchTerm" data-aptitude-autocomplete="@Url.Action("Autocomplete")" />
<input type="submit" value=Search />
And this is part of the controller of the view
public ActionResult Autocomplete(string term)
{
var model = db.tests
.Where(r => term == null || r.name.Contains(term))
.Select(r => new
{
label = r.name
});
return Json(model, JsonRequestBehavior.AllowGet);
}
//
// GET: /Test/
public ActionResult Index(string searchTerm = null)
{
var model = db.tests
.Where(r => searchTerm == null || r.name.StartsWith(searchTerm));
if (Request.IsAjaxRequest())
{
return PartialView("_Test", model);
}
return View(model);
}
I'm new to ajax as well as bootstrap 3.
I got the searchfunction and autocomplete from a tutorial I followed.
Anybody any idea on how to fix this, because it worked fine?
Thanks in advance!
