javascript - 来自 PHP mySQL 查询的 jQuery 自动完成

Question

我正在尝试按照本教程进行自动完成:http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

如果有人有建议，我会向其他人开放，但我离题了。我想输入客人的姓氏并在下方显示所有匹配项的列表。但是我得到了一些非常奇怪的东西，它说“有 1 个结果可用，使用向上和向下箭头键进行导航。”并且在我可以单击的文本某处有一个小点，它将填充我的只读文本框。我怎样才能让它正常工作？老实说，我不知道我哪里错了。我将发布我的 html 和 jQuery。我的 php 显然工作正常，所以我觉得没有必要发布。

<div class="guestinfo">
    <p class="ui-widget">
        <div><label>Exisiting Guest List</label></br>
        <input type="text" name="guests" id="guests"/></div>
        <input readonly="readonly" type="text" id="firstname" name="firstname"/>
        <input readonly="readonly" type="text" id="lastname" name="lastname"/>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script>
            $(function() {
                $('#guests').val("");

                $("#guests").autocomplete({
                    source: "classes/autocomplete_guests.php",
                    minLength: 2,
                    select: function(event, ui) {
                        $('#firstname').val(ui.item.fname);
                        $('#lastname').val(ui.item.lname);
                    }
                });
            });

        </script></p>

Answer 1

这是一个辅助功能，你可以很容易地在 css 中解决这个问题，尝试在你的样式表中添加这个:

.ui-helper-hidden-accessible {
    display:none;
}