61

我正在尝试使用 jQuery UI Autocomplete 来显示 MySQL 数据库中的人名列表。基本功能正在工作 - 当您输入两个或更多字母时，会显示可能的名称列表 - 但是当我将鼠标悬停在列表上或按向下键访问列表时，它会消失（下面的 2 个屏幕截图可能有助于解释这个）。

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

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

截图 1

但是将鼠标悬停或按下“向下”键，它会在选择之前消失

截图 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;

?>
4

6 回答 6

202

该错误是由于两个jQuery UI 文件同时加载到客户端浏览器时发生冲突引起的。如果您进入您的<head>部分，您可能会看到那里引用了两个不同的 jQuery UI文件。只需删除一个，它就会工作。

于 2013-02-26T12:14:17.527 回答
5

我遇到了同样的问题，但我在 DOM 中一次只有一个 jquery-ui 脚本标签。我正在使用包含脚本标记的 Ajax 加载内容。如果我在一个页面上这样做了两次，它会破坏自动完成下拉菜单，即使第二个请求的内容正在替换第一个请求的内容。一种解决方法是在呈现包含 jquery-ui 脚本的内容之前添加此行：

$.ui = null;

于 2015-04-21T22:49:09.960 回答
4

当两个jQuery UI文件同时加载到您的浏览器时会导致此错误。这可能会导致jquery冲突。删除未使用的 jquery UI 文件以解决错误。

在我的情况下 jquery-ui.min.js 文件无意中包含在 assets 文件夹中。要删除它，我在 config/main.php 的组件中添加了一个代码

     'clientScript' => array(
        'scriptMap' => array(
            'jquery-ui.min.js' => false,
        )),
于 2016-02-16T07:51:14.327 回答
1

我有同样的问题，我没有使用 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()
    }
})

于 2017-07-05T09:31:46.120 回答
1

在您的标头中加载的 jquery 文件包含所有 UI 元素，并且自动添加到您的文件中的那个具有不需要上传的子元素，因此您应该将其删除。

于 2016-02-17T05:39:53.643 回答
0

我在提前输入时遇到了类似的问题

我使用了focus()，问题就解决了。

例子：

$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();
于 2019-07-03T20:10:06.507 回答