I was trying to use Twitter Typeahead.js in my application.But it didnt seem to work.I think I am missing some line of code anywhere but cant figure out where I have went wrong.
Script Reference
<script src="~/plugins/typeahead/typeahead.bundle.min.js"></script>
HTML
<input type="text" class="form-control typeahead" id="txtRegNo" data-url="@Url.Action("RegistrationNoSearch")">
JS Code
$(function () {
var RegNoSearch = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: $("#txtRegNo").data("url"),
filter: function (datas) {
return $.map(datas.results, function (data) {
return {
value: data.RegNo,
id: data.RegId
};
});
},
ajax: {
type: 'POST',
data: {
param: function () {
return $('#txtRegNo').val();
}
},
context: this
}
}
});
// Initialize the Bloodhound suggestion engine
RegNoSearch.initialize();
$('#txtRegNo .typeahead').typeahead({
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: RegNoSearch.ttAdapter()
});
});
Controller Code
[HttpPost]
public JsonResult RegistrationNoSearch(string regNo)
{
try
{
List<clsRegistrationNoSearch> _lstRegNoSearch = new List<clsRegistrationNoSearch>();
_lstRegNoSearch = _db.StudentRegistrations
.Where(r => r.RegistrationNumber.StartsWith(regNo))
.Select(r => new clsRegistrationNoSearch
{
RegId=r.Id,
RegNo=r.RegistrationNumber
}).ToList();
return Json(_lstRegNoSearch, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(null);
}
}