In my web application, I have added a text box and I wanted to search for data and show it while typing on it.
So I followed this video and added the same to my project. https://www.youtube.com/watch?v=k5v8a575QX0
But when the page loads, I got this error in the console.```$(...).autocomplete is not a function``
I have to google it and found some jquery libraries are missing so I downloaded the files and included them in my project and then mapped them to it from the view.
But still, the error is the same.
<link href="~/Addons/css/select2.min.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="~/Addons/autocomplete/css/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<script src="~/Addons/autocomplete/js/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="~/Addons/js/select2.full.min.js"></script>
<div class="col-md-6">
<input type="text" placeholder="Type the Item Name or Number Here" class="form-control" id="itemSerachBox" />
</div>
$(function () {
$("#itemSerachBox").autocomplete({
sourse: function (request, response) {
$.ajax({
url: '@Url.Action("GetSearchItems","Ajax")',
dataType: "json",
data: {
search: $("itemSerachBox").val()
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.ItemName_Number,
value: item.ID
};
}));
},
error: function (xhr, status, error) {
toastr.error("Invalid Item");
}
});
}
});
});
Thank you very much for your support.
I finally found that the codings and the reference are correct, but the javascripts are in conflict with other scripts.
That's why I got this error and then I managed to move some script to the Layout and then this worked.
Once again thank you for the support