Я пытаюсь использовать 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;
?>
Ошибка возникает из-за конфликта, который возникает, когда файлы два jQuery UI загружаются одновременно в браузер клиента. Если вы достигнете пика в разделе <head>, вы, вероятно, увидите, что на нем есть два разных файла jQuery UI. Просто удалите его, и он будет работать.
У меня была та же проблема, но у меня только один тэг jquery-ui script в DOM за раз. Я загружал контент с помощью Ajax, который включал тег script. Если бы я сделал это дважды на одной странице, это сломало бы всплывающее окно автозаполнения, хотя содержимое второго запроса заменяло содержимое первого. Один способ заключается в том, чтобы добавить эту строку перед отображением содержимого, содержащего jquery-ui script:
$.ui = null;
Эта ошибка возникает, когда два файла jQuery UI загружаются в ваш браузер одновременно. Это может привести к конфликту jquery. Удалите неиспользуемый файл пользовательского интерфейса jquery, чтобы решить эту ошибку.
В моем случае файл jquery-ui.min.js был непреднамеренно включен из папки с данными. Чтобы удалить его, я добавил один код в компоненты в config/main.php
'clientScript' => array(
'scriptMap' => array(
'jquery-ui.min.js' => false,
)),
Файл jquery, который загружается в ваш заголовок, содержит весь элемент пользовательского интерфейса, и тот, который автоматически добавляется в ваш файл, имеет элемент children, который не нужно загружать, поэтому его следует удалить.
У меня была такая же проблема, и я не использовал 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()
}
})У меня была похожая проблема с typeahead
Я использовал focus() и проблема была решена.
Пример:
$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();