I used ui jquery auto-complete in my MVC3 web project and kept jquery in external js file and included it in the web page but it is not working.
I used following code in js file for ui jquery auto-complete :
$(function () {
$("#ReportsTo_FullName").autocomplete({
source: function (request, response) {
var linkPath = "@Html.Raw(Url.Action("AutocompleteSuggestions", "Employee", new { @term = "Term", @moduleName="ModuleName"}))";
linkPath = linkPath.replace("Term", request.term);
linkPath = linkPath.replace("ModuleName", "Employee");
$.post(linkPath, function (data) {
response($.map(data, function (item) {
return { label: item.FullName, value: item.Id }
}
));
})
$.error(function (xhr, ajaxOptions, thrownError) { alert(thrownError); })
},
minLength: 1,
focus: function (event, ui) {
$("#ReportsTo_FullName").val(ui.item.label);
return false;
},
select: function (event, ui) {
if (ui.item) {
$("#ReportsTo_FullName").css('border', '');
$("#ReportsTo_FullName").val(ui.item.label);
$("#ReportsToId").val(ui.item.value);
return false;
}
},
change: function (event, ui) {
if (ui.item == null) {
$("#ReportsTo_FullName").css({ 'border': '1px solid #ff0000' });
$("#ReportsToId").val(null);
}
}
});
});
But it is failed to execute and its not showing autocomplete.
Whats wrong in above jquery ?
How to resolve this problem ?