jQuery UI 自动完成 - 菜单在悬停时消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14748193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Autocomplete - menu disappears on hover
提问by Chris
I'm trying to use jQuery UI Autocomplete to bring up a list of names of people in a MySQL Database. The basic function is working - when you type in two or more letters a list of possible names is displayed - but when I hover the mouse over the list or press the down key to access the list, it disappears (2 screenshots below may help to explain this).
我正在尝试使用 jQuery UI 自动完成功能来显示 MySQL 数据库中的人员姓名列表。基本功能正在运行 - 当您输入两个或更多字母时，会显示可能名称的列表 - 但是当我将鼠标悬停在列表上或按向下键访问列表时，它消失了（下面的 2 个屏幕截图可能有助于解释一下）。
What this means is that the Autocomplete becomes pointless as I can't actually access the list! If anyone can help I'd be most appreciative! Screenshots and code are posted below.
这意味着自动完成变得毫无意义，因为我实际上无法访问列表！如果有人可以提供帮助，我将不胜感激！屏幕截图和代码发布在下面。
Type in the first few characters and the menu appears
输入前几个字符，出现菜单
But hover the mouse or press the 'down' key and it disappears before a selection can be made
但是将鼠标悬停或按“向下”键，它会在进行选择之前消失
HTML:
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:
jQuery：
$(document).ready(function(){
$("#editname").autocomplete({
source: "names.php",
minLength: 2,
});
});
PHP:
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;
?>
回答by bicycle
The error is caused because of a conflict that occurs when twojQuery UI files are loaded into the client's browser at the same time. If you peak into your <head>section you will probably see you have two different jQuery UIfiles referenced there. Just remove one and it will work.
该错误是由于两个jQuery UI 文件同时加载到客户端浏览器时发生冲突引起的。如果您进入您的<head>部分，您可能会看到那里引用了两个不同的 jQuery UI文件。只需删除一个，它就会起作用。
回答by regularmike
I had the same problem, but I only ever had one jquery-ui script tag in the DOM at a time. I was loading content with Ajax that included the script tag. If I did that twice on one page, it would break the autocomplete dropdown, even though the content of the second request was replacing the content of the first. One workaround is to add this line before rendering content containing the jquery-ui script:
我遇到了同样的问题，但我一次在 DOM 中只有一个 jquery-ui 脚本标签。我正在使用包含脚本标记的 Ajax 加载内容。如果我在一个页面上这样做两次，它会破坏自动完成下拉菜单，即使第二个请求的内容替换了第一个请求的内容。一种解决方法是在呈现包含 jquery-ui 脚本的内容之前添加此行：
$.ui = null;
$.ui = null;
回答by rushil
This error is caused when two jQuery UI files are loaded into your browser at the same time.This may cause jquery conflict. Remove the unused jquery UI file to solve the error.
当两个jQuery UI 文件同时加载到您的浏览器时会导致此错误。这可能会导致jquery 冲突。删除未使用的jquery UI 文件以解决错误。
In my case jquery-ui.min.js file was unintentionally included from assets folder.To remove it i added one code in components in config/main.php
在我的情况下，jquery-ui.min.js 文件无意中包含在资产文件夹中。要删除它，我在 config/main.php 的组件中添加了一个代码
'clientScript' => array(
'scriptMap' => array(
'jquery-ui.min.js' => false,
)),
回答by rushil
The jquery file which is loaded in your header contains all UI element, and the one which automatically gets added in your file, have the children element which does not needed to upload, so you should remove it.
在您的标题中加载的 jquery 文件包含所有 UI 元素，而自动添加到您的文件中的 jquery 文件具有不需要上传的 children 元素，因此您应该将其删除。
回答by Akshay Vijay Jain
I had same problem and I did not use the jquery UI twice, my jquery UI was part of jquery DataTable.
My problem was solved with following code
Note: with this code we need to write code to close the UL when we do not click on UL
我有同样的问题，我没有使用过两次 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()
}
})回答by Mohit Kanojia
I had similar problem with typeahead
我在 typeahead 上遇到了类似的问题
I used focus() and the problem was solved.
我使用了focus()，问题就解决了。
Example:
例子：
$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();
