时间戳

首页 > 解决方案 > jQuery Ui 甚至没有创建 ui 元素

jquery - jQuery Ui 甚至没有创建 ui 元素

问题描述

这是我第一次使用 jQuery ui。我遵循了这个文档https://jqueryui.com/autocomplete/但它对我不起作用。当我在 codepen 中运行相同的代码时，它正在工作。

自动完成功能正在执行而没有任何错误，但它只是不创建建议列表（ul 元素）

HTML：

<head>
  <link rel="stylesheet" href="{{asset('assets/css/bootstrap.min.css')}}"> {{--jQuery UI For Autocomplete--}}
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src="{{asset('assets/js/jquery-3.4.1.min.js')}}"></script>
  <script src="{{asset('assets/js/bootstrap.bundle.js')}}"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<div class="col ui-widget">
  <label for="create-affinity-id" class="font-weight-bold">Affinity Id</label>
  <input id="create-affinity-id" type="text" class="form-control" name="affinity_id" placeholder="Affinity ID">
</div>

脚本

<script>
  $(document).ready(function() {
    var availableTutorials = [
      "ActionScript",
      "Bootstrap",
      "C",
      "C++",
    ];

    $('#create-affinity-id').autocomplete({
      source: availableTutorials
    });
  }
  });
</script>

标签： jqueryjquery-ui-autocomplete

解决方案

两个额外的语法错误,和额外的{ 用这个替换js代码

$(document).ready(function(){
   var availableTutorials  =  [
                            "ActionScript",
                            "Bootstrap",
                            "C",
                            "C++"
                        ];
                        $('#create-affinity-id').autocomplete({
                            source: availableTutorials
                        });

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
        <link rel="stylesheet" href="{{asset('assets/css/bootstrap.min.css')}}">
    {{--jQuery UI For Autocomplete--}}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="{{asset('assets/js/jquery-3.4.1.min.js')}}"></script>
    <script src="{{asset('assets/js/bootstrap.bundle.js')}}"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>

    <div class="col ui-widget">
                <label for="create-affinity-id" class="font-weight-bold">Affinity Id</label>
                <input id="create-affinity-id" type="text" class="form-control" name="affinity_id" placeholder="Affinity ID">
            </div>

    <script>

$(document).ready(function(){
   var availableTutorials  =  [
                            "ActionScript",
                            "Bootstrap",
                            "C",
                            "C++"
                        ];

                        $('#create-affinity-id').autocomplete({
                            source: availableTutorials
                        });
                    
});

    </script>

推荐阅读