jQuery UI 自动完成 - 菜单在悬停时消失 [英] jQuery UI Autocomplete - menu disappears on hover

查看:39
本文介绍了jQuery UI 自动完成 - 菜单在悬停时消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 jQuery UI 自动完成功能来调出 MySQL 数据库中的人员姓名列表.基本功能正在运行 - 当您输入两个或更多字母时,会显示可能名称的列表 - 但是当我将鼠标悬停在列表上或按向下键访问列表时,它消失了(下面的 2 个屏幕截图可能有助于解释一下).

这意味着自动完成变得毫无意义,因为我实际上无法访问列表!如果有人可以提供帮助,我将不胜感激!屏幕截图和代码发布在下面.

输入前几个字符,出现菜单

但是将鼠标悬停或按下向下"键,它会在进行选择之前消失

HTML:

 

选择要编辑的帐户<div id="iechooseaccountlabel" class="labeldiv"><!--[如果 IE]>输入学生姓名<![endif]-->

<input type="text" class="inputs" id="editname" placeholder="输入学生姓名"/>

jQuery:

$(document).ready(function(){$("#editname").自动完成({来源:names.php",最小长度:2,});});

PHP:

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

解决方案

该错误是由于两个 jQuery UI 文件同时加载到客户端浏览器时发生冲突引起的.如果您进入 部分,您可能会看到其中引用了两个不同的 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆