Question

我已经就此问题咨询了多个主题，并尝试了许多调试方法，但尚未找到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;
}

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

Answer 1

我明白了......这里有一个额外的括号：

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

显然，“echo json_encode（$ dname_list）”PHP语句产生了一个额外的括号，它被JQuery Autocomplete解释为null，反过来又没有返回任何值。修复程序正在删除额外的括号：

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

感谢所有看过的人。此外，重要记住如果您遇到挫折或代码挑战，请继续！不要放弃！你会找到一个解决方案！

JQuery自动填充问题？

1 个答案: