jquery $(...).autocomplete不是函数加载页面时出错

dluptydi  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(179)

在我的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");
        }
      });

    }

  });
});
xpszyzbs

xpszyzbs1#

非常感谢您的支持。
我终于发现编码和参考是正确的,但javascript与其他脚本冲突。
这就是为什么我得到这个错误,然后我设法移动一些脚本到布局,然后这工作。
再次感谢大家的支持

hs1ihplo

hs1ihplo2#

由于自动完成不是一个内置函数,因此您必须在项目中包含所需的插件。由于您提供的代码没有显示您包含的scripts标签,因此我将为您提供所需的必要内容:
1.确保在项目中包含了jQuery和jQueryUI脚本,并且它们在使用自动完成功能的代码之前加载。
1.将自动完成代码放在document.ready中,以确保在文档加载完成后执行代码。

$(document).ready(function() {
      $("#itemSerachBox").autocomplete({
         // your code
    });

相关问题