JQuery UI Autocomplete - меню исчезает при зависании

Я пытаюсь использовать jQuery UI Autocomplete, чтобы открыть список имен людей в базе данных MySQL. Основная функция работает - при вводе двух или более букв отображается список возможных имен, но когда я наводил указатель мыши на список или нажимал клавишу "вниз" для доступа к списку, он исчезает (2 скриншота ниже могут помочь объясните это).

Это означает, что автозаполнение становится бессмысленным, поскольку я не могу получить доступ к списку! Если кто-то может помочь, я буду очень благодарен! Скриншоты и код размещены ниже.

Введите первые несколько символов и появится меню

Но наведите указатель мыши или нажмите клавишу "вниз", и он исчезнет, прежде чем можно будет сделать выбор.

HTML:

  <div id="chooseaccount">
  Choose Account to Edit
  <div id="iechooseaccountlabel" class="labeldiv">
    <!--[if IE]>
     Enter Student Name
    <![endif]-->
   </div>

  <input type="text" class="inputs" id="editname" placeholder="Enter Student Name" />

  </div>

JQuery

$(document).ready(function(){

$("#editname").autocomplete({
 source: "names.php",
 minLength: 2,
});

});

PHP:

<?php  

$mysqli = new mysqli('********', '********', '**********', '*********');
$text = $mysqli->real_escape_string($_GET['term']);

$query = "SELECT name FROM users WHERE name LIKE '%$text%' ORDER BY name ASC";
$result = $mysqli->query($query);
$json = '[';
$first = true;
while($row = $result->fetch_assoc())
{
if (!$first) { $json .=  ','; } else { $first = false; }
$json .= '{"value":"'.$row['name'].'"}';
}
$json .= ']';
echo $json;

?>

Ответ 1

Ошибка возникает из-за конфликта, который возникает, когда файлы два jQuery UI загружаются одновременно в браузер клиента. Если вы достигнете пика в разделе <head>, вы, вероятно, увидите, что на нем есть два разных файла jQuery UI. Просто удалите его, и он будет работать.

Ответ 2

У меня была та же проблема, но у меня только один тэг jquery-ui script в DOM за раз. Я загружал контент с помощью Ajax, который включал тег script. Если бы я сделал это дважды на одной странице, это сломало бы всплывающее окно автозаполнения, хотя содержимое второго запроса заменяло содержимое первого. Один способ заключается в том, чтобы добавить эту строку перед отображением содержимого, содержащего jquery-ui script:

$.ui = null;

Ответ 3

Эта ошибка возникает, когда два файла jQuery UI загружаются в ваш браузер одновременно. Это может привести к конфликту jquery. Удалите неиспользуемый файл пользовательского интерфейса jquery, чтобы решить эту ошибку.

В моем случае файл jquery-ui.min.js был непреднамеренно включен из папки с данными. Чтобы удалить его, я добавил один код в компоненты в config/main.php

     'clientScript' => array(
        'scriptMap' => array(
            'jquery-ui.min.js' => false,
        )),

Ответ 4

Файл jquery, который загружается в ваш заголовок, содержит весь элемент пользовательского интерфейса, и тот, который автоматически добавляется в ваш файл, имеет элемент children, который не нужно загружать, поэтому его следует удалить.

Ответ 5

У меня была такая же проблема, и я не использовал JQuery UI дважды, мой jquery UI был частью jquery DataTable.
Моя проблема была решена с помощью следующего кода
Примечание: с этим кодом нам нужно написать код для закрытия UL, когда мы не нажимаем на UL

$(".gettingContactList").autocomplete({
     source:this.contactList,
     /*following focus function was written because when mouse
     was being hovered over the menu, the menu was disappearing*/
    focus:function(e,ui) { 
      $(e.toElement).parents().show()
    }
})

Ответ 6

У меня была похожая проблема с typeahead

Я использовал focus() и проблема была решена.

Пример:

$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();