javascript - 未找到 JQuery .autocomplete?

标签 javascript jquery

我正在尝试为我的搜索栏提供自动完成功能。

$(function() {
  var availableTags = [{
      "game1": "title1"
    },
    {
      "game2": "title2"
    },
    {
      "game3": "title3"
    },
  ];
  $("#choices-text-preset-values").autocomplete({
    source: availableTags
  });
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<form method="GET" action="{% url 'search_results' %}" style="display: inline; background-color: transparent;" method="get">

  <div id="search_bar" class="row" style="margin-top: 0px; text-align: center;">

    <input name="q" class="sb-pos" id="choices-text-preset-values" type="text" placeholder="Aramak istediğiniz oyunu yazın!   " style="padding-left: 30px;" />
    <button type="submit" style="background-color: transparent; border: none;" class="sb-icon-pos">
                            <i class="fa fa-search" style="color: black; font-size: x-large;"></i>
                        </button>
  </div>
</form>

我收到此错误:

TypeError: $( "#choices-text-preset-values" ).autocomplete is not a function. (In '$( "#choices-text-preset-values" ).autocomplete({
      source: ['deneme','deneme2']
    })', '$( "#choices-text-preset-values" ).autocomplete' is undefined)

最佳答案

由于多种原因,可能无法找到 jQuery(或一般的任何 javascript API)API。

通常,问题是由脚本执行时未加载 jQuery javascript 代码引起的。这可能是由于多种原因造成的:

  • 广告拦截器可能拦截了 jQuery javascript 文件
  • jQuery javascript 文件托管在 CDN/其他离线服务器上
  • 您加载了 jQuery,但忘记包含 jQuery UI(自动完成是 jQuery UI 的一部分!)
  • 您的代码在加载 jQuery 之前执行。
    这可能是因为您的 <script>$(document).ready(/*whatever*/);</script>代码位于 <script src="/path/to/jquery.js"></script> 之前 block ,或者因为您错误地创建了 jquery 脚本标记 async 。因此,请确保:
    1. jQuery 脚本标签位于您的脚本之前
    2. 标记为 async .

关于javascript - 未找到 JQuery .autocomplete?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68908686/

相关文章:

javascript - 当选中单选按钮时如何将元素的位置更改为左侧?

javascript - 将参数传递给 array.prototype.findIndex(callback[, thisArg])

javascript - jquery - 根据 json 值设置选择选项

jquery - 如何在AJAX响应后移除类的悬停状态

javascript - Angular 将一个元素附加到指令内当前元素的子元素

javascript - 查找具有某个类的所有元素,将它们的 ID 保存到一个数组中,然后将该 ID 数组传递到回调中

javascript - RequireJS 配置映射整个目录

javascript - Slide 使用 jQuery UI 隐藏一个 div。如何将其相邻的 div 与其一起滑动以取代它的位置?

javascript - 从显示 :none to visible on click 切换类

javascript - 动态提供onclick并避免重复的事件调用