jQuery Пользовательский интерфейс даже не создает элементы пользовательского интерфейса - PullRequest
Новая
       26

jQuery Пользовательский интерфейс даже не создает элементы пользовательского интерфейса

2 голосов
/ 21 января 2020

Это первый раз, когда я использую jQuery пользовательский интерфейс. Я следовал этой документации 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>

1 Ответ

1 голос
/ 21 января 2020

две синтаксические ошибки дополнительные , и дополнительные { заменить 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>
...