在我的Web应用程序中,我添加了一个文本框,我想搜索数据并在键入时显示它。
所以我跟着这个视频,并添加到我的项目相同。https://www.youtube.com/watch?v=k5v8a575QX0
但是当页面加载时,我在控制台得到了这个错误。```$(...).autocomplete不是一个函数``
我不得不谷歌它,发现一些jquery库丢失,所以我下载了文件,并将它们包含在我的项目中,然后将它们从视图Map到它。
但是,错误是一样的。
<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");
}
});
}
});
});
2条答案
按热度按时间xpszyzbs1#
非常感谢您的支持。
我终于发现编码和参考是正确的,但javascript与其他脚本冲突。
这就是为什么我得到这个错误,然后我设法移动一些脚本到布局,然后这工作。
再次感谢大家的支持
hs1ihplo2#
由于自动完成不是一个内置函数,因此您必须在项目中包含所需的插件。由于您提供的代码没有显示您包含的scripts标签,因此我将为您提供所需的必要内容:
1.确保在项目中包含了jQuery和jQueryUI脚本,并且它们在使用自动完成功能的代码之前加载。
1.将自动完成代码放在document.ready中,以确保在文档加载完成后执行代码。