I have a partial view with the textbox
<input type="text" name="models" id="models" />
In my script section of _Layout.csthml I have the script
$('#models').on('input propertychange paste', function () {
var target = $(this);
target.autocomplete({
source: function (request, response) {
$.post(@Url.Action("MyAction", "MyController"), request, response);
},
minLength: 1,
delay: 1000
});
});
However, when I enter some text in the input nothing happens, also no errors appear. I suspect that the reason is that #models does not exist yet when DOM is loaded. I was thinking about using global ajaxSuccess function but I am not sure if it a right thing to do. Will it be also called when I enter text in the input and go recursive? What is the best practice here?
I tried using ajaxSuccess like this:
$(document).ajaxSuccess(function() {
$("#models").autocomplete({
source: function (request, response) {
$.ajax({
url: "/MyController/MyAction",
type: "POST",
dataType: "json",
data: { searchText: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Text, value: item.Text };
}));
}
});
},
});
});
But got the error
Uncaught TypeError: $(...).autocomplete is not a function
I am sure that jQuery is loaded only once on the page and before my script. Intellisense does not see autocomplete function at all.
