Question

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

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

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

Screenshot 1

但是将鼠标悬停或按下“向下”键会消失，然后才能进行选择

Screenshot 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;

?>

Answer 1

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

Answer 2

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

$.ui = null;

Answer 3

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

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

     'clientScript' => array(
        'scriptMap' => array(
            'jquery-ui.min.js' => false,
        )),

Answer 4

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

Answer 5

我有同样的问题而且我没有使用jquery UI两次，我的jquery UI是jquery DataTable的一部分。
我的问题通过以下代码解决了注意：使用此代码我们需要编写我们不点击UL时关闭UL的代码

public class CalendarTest2 extends JFrame {
    private static final long serialVersionUID = 1L;

    public CalendarTest2() {
        Calendar cal = Calendar.getInstance();
        JCalendar jCalendar1 = new JCalendar();
        cal.setTime(jCalendar1.getDate());
        int dayToBeSelected = cal.get(Calendar.DAY_OF_MONTH);
        dayToBeSelected = 21;

        JPanel jpanel = jCalendar1.getDayChooser().getDayPanel();
        Component compo[] = jpanel.getComponents();
        for (Component comp : compo) {
            if (!(comp instanceof JButton))
                continue;

            JButton btn = (JButton) comp;
            if (btn.getText().equals(String.valueOf(dayToBeSelected)))
                comp.setBackground(Color.red);
        }
        add(jpanel);
    }

    public static void main(String[] args) {
        CalendarTest2 test = new CalendarTest2();
        test.setVisible(true);
        test.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        test.setSize(800, 800);
    }
}

Answer 6

我也有类似的问题

我使用focus（）并解决了问题。

示例：

$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();

jQuery UI自动完成 - 菜单在悬停时消失

6 个答案: