从PHP mySQL查询jQuery自动完成

Question

I am trying to follow this tutorial on autocomplete: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

I am open to others if anyone has suggestions, but I digress. I want to type the last name of a guest and get a list displayed below of all the matches. However I get something real screwy where it says "1 result is available, use up and down arrow keys to navigate." and has a tiny dot somewhere in the text I can click which will fill my readonly textboxes. How can I get this to function properly? I honestly don't know where I am going wrong. I will post my html and jQuery. My php obviously works fine so I don't feel it's necessary to post.

<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

This is an accessibility feature, you can easily fix this in css, try adding this in your stylesheet:

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