JQuery 自动完成问题？答案

【问题标题】：JQuery autocomplete issues?JQuery 自动完成问题？
【发布时间】：2016-05-31 04:12:27
【问题描述】：

我已经就这个问题咨询了多个线程，并尝试了许多调试方法，但尚未找到 100% 的解决方案。我正在尝试在网站上实现自动完成功能。

主要问题是下拉菜单/建议没有完全显示。当我输入特定值时，输入框下方会显示一些正确响应的内容，但不完整（看起来像折叠菜单）。我错过了什么吗？

这是我的 PHP：

<?php
if (!isset($web_dbi)) {
        $web_dbi=new MySQLi("#", "#", "#", "#");
        if ($web_dbi->connect_errno) die ("Failed to connect");
    }

    $sql = "query";
    $result = mysqli_query($web_dbi, $sql) or die("Error " . mysqli_error($web_dbi));

    $dname_list = array();
    while($row = mysqli_fetch_array($result))
    {
        $dname_list[] = $row['first'];
    }

    $num_rows_result = mysqli_num_rows($result);

?>

这是我的 HTML：

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>

</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript">
    $(function() {
        var availableTags = [ <?php echo json_encode($dname_list); ?> ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>

</body>
</html>

这是我的 CSS：

.ui-autocomplete { position: absolute; cursor: default; }   

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/*
 * jQuery UI Menu 1.8.7
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
ul.ui-autocomplete.ui-menu {
  z-index: 1000;
}

.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

有人发现任何问题或有建议吗？

【问题讨论】：

标签： php jquery css autocomplete jquery-ui-autocomplete

【解决方案1】：

我想通了……这里多了一个括号：

var availableTags = [ <?php echo json_encode($dname_list); ?> ];

显然，“echo json_encode($dname_list)”PHP 语句产生了一个额外的括号，JQuery 自动完成将其解释为空值，并且没有返回任何值。修复方法是移除多余的括号：

var availableTags = <?php echo json_encode($dname_list); ?>;

感谢任何看过的人。另外，重要提示 记住如果您在代码方面遇到挫折或挑战，请继续！不要放弃！你会找到解决办法的！

【讨论】：