MVC Bootstrap: Autocomplete doesn't show properly - asp.net-mvc

Question

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!

Answer 1

I realise that this question in relatively old, however I'm not sure if you've found a solution and haven't got round to posting it??
Anyway - I have just run into this problem (using MVC 5, BootStrap 3 and typeahead.js 0.10.2).
I found this site, which kind of half solves "my/our" problem Typeahead CSS.
I've just ripped the following styles from the site and used them in my partial view (where the search box sits) and the box is now working and looks like all the demos on the typeahead.js example site
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
the only problem that remains for me now is that the suggestion text (from typeahead) and the actual text in the input is not aligned and looks like you're viewing it after too many beers!