Метка автозаполнения не отображает данные на скрытом элементе - PullRequest
Новая
       8

Метка автозаполнения не отображает данные на скрытом элементе

0 голосов
/ 18 марта 2019

Метка автозаполнения не отображает данные в скрытом поле ввода с отображением: нет Атрибут после отображения.

Я пытаюсь выполнить автозаполнение данных из базы данных MySQL с помощью приведенного ниже сценария.Он не отображает метку, пока дает правильный ответ в сетевой консоли инструмента разработчика.Когда я показываю div с помощью метода .show (), автозаполнение не отображает метку. 

    function openSearchDiv(){
        $('.search').show();  
    }

$(document).on('focus','#search',function(){
$(this).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: 'products.php',
                    dataType: 'json',
                    method: 'post',
                    data: {
                        name_startsWith: request.term,
                        type: 'type'
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                                return {
                                    label: item['id'],
                                    value: item['id'],
                                    data : item
                                }
                            }));
                        }
                    });
            },
            autoFocus: true,            
            minLength: 1,
            select: function( event, ui ) {
               // $('#player').val(ui.item.data.player);
               // $('#marks').val(ui.item.data.marks);
            }               
        });
     });

.search {
      display:none;
      margin-top: 20px;
      } 

 <div class="search">
 <input type="text" id="search" placeholder="Type Id" />
 </div>

Я проверил этот код из атрибута display:none, он отлично работает

1 Ответ

1 голос
/ 29 марта 2019

Итак, если вы посмотрите на мою скрипку , я использовал jQuery версии 3.3.1 с jQuery UI версии 1.12.1 & mdash; стабильная версия на момент написания.

Но на вашей Fiddle вы используете jQuery 3.3.1 с jQuery UI 1.11.4 (устаревшая версия). И это проблема, потому что в jQuery 3.3.1 вы должны использовать jQuery UI 1.12.1.

А если вы хотите использовать jQuery UI устаревшую версию , вам следует использовать jQuery 2.2.4 или более раннюю версию. Кроме того, в вашем случае вы должны установить для параметра appendTo соответствующий элемент / селектор. Пример: 

$('#search').autocomplete({
  appendTo: $('#search').parent()
  // other options
});

Я разбудил вашу скрипку, и вы можете проверить мою здесь , где я в основном пропустил материал AJAX, но я не менял CSS и использовал jQuery 2.2.4 с jQuery UI 1.11.4 .

Я также разветвил раздвоенную скрипку и изменил ее на использование jQuery 3.3.1 с jQuery UI 1.12.1 . Вы можете проверить это здесь .

...