jQuery UI自动完成 - 菜单在悬停时消失 [英] jQuery UI Autocomplete - menu disappears on hover
问题描述
我试图使用jQuery UI自动完成来显示MySQL数据库中的人员名单。基本功能正在工作 - 当您键入两个或多个字母时，会显示可能的名称列表 - 但是当我将鼠标悬停在列表上或按下下键来访问列表时，它将消失（下面的两个截图可能有助于解释这一点）。
这意味着自动完成变得毫无意义，因为我实际上无法访问列表！如果有人能帮助我，我会最感激！截图和代码如下。
键入前几个字符并出现菜单
但是可以将鼠标悬停或按下向下键并在选择之前消失。
b$ b
HTML：
< div id =chooseaccount>
选择账户以编辑
< div id =iechooseaccountlabelclass =labeldiv>
<！ - [if IE]>
输入学生姓名
<！[endif] - >
< / div>
< input type =textclass =inputsid =editnameplaceholder =Enter Student Name/>
< / div>
jQuery：
$（document）.ready（function（）{
$ b $（＃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 文件引用了该文件。只要删除一个，它就会工作。
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).
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:
<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;
?>
The error is caused because of a conflict that occurs when two jQuery 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 UI files referenced there. Just remove one and it will work.
这篇关于jQuery UI自动完成 - 菜单在悬停时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
