时间戳

首页 > 解决方案 > JQuery 似乎不适用于自动完成（Bootstrap + Django 网站）

javascript - JQuery 似乎不适用于自动完成（Bootstrap + Django 网站）

问题描述

我只是尝试使用 JQuery 自动完成，但没有更改自动完成建议。我没有回电话，只是使用本地列表进行自动完成。我试过用检查元素来监控网络，但它什么也没做。在我完成文本时没有任何变化。这是所需的代码。

<script type="text/javascript">

$(function() {

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
  $("#vote").autocomplete({
    minLength:3,
    source: availableTags
  });
});

</script>

我的包括：

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/
    GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="
    sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/
    JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

我的意见：

  <div class="ui-widget">
     <input id="vote" type="text" name="vote"/>
  </div>

它什么也没做。也不会抛出任何错误以便我修复。我是新手，在挠了两天的头后，在这里寻求帮助。

标签： javascriptjqueryajaxweb

解决方案

有两个问题 1) 自动完成是 JqueryUI 的一个特性——你也需要对该库的引用..见下文

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous">
</script>

2) 如评论中所述，“jquery slim”缺少 JQueryUI 所需的一些组件。如果您将获得非精简版本，您的代码应该开始工作

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>

推荐阅读