php - PHP mySQL 查询的 jQuery 自动完成显示不正确

Question

我正在使用这个自动完成图:http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/ 。

jQuery 未显示。您实际上可以单击灰线(如图所示)，它将加载所有内容。由于某种原因我看不到名字。

我认为这可能是 css 问题，但我找不到任何相关内容。

<div class="guestinfo">
        <form action='' method="POST">
        <div class="ui-widget">
            <div class="existingguest"><label>Exisiting Guest</label>
            <input type="text" class="auto" name="guests" id="guests"/></div>
            </div>  
            <div class="existingguestinfo">
            <div><label>First Name</label><input readonly="readonly" type="text" id="firstname" name="firstname"/></div>
            <div><label>Last Name</label><input readonly="readonly" type="text" id="lastname" name="lastname"/></div>

            <script>
                $(function() {
                    $('.auto').val("");

                    $(".auto").autocomplete({
                        source: "classes/autocomplete_guests.php",
                        minLength: 1,
                        select: function(event, ui) {
                            $('#firstname').val(ui.item.fname);
                            $('#lastname').val(ui.item.lname);
                            $('#address').val(ui.item.address);
                            $('#phone').val(ui.item.phone);
                        }
                    });
                });
            </script>

            <!--<div><label>Add New Guest</label></div>-->
            <div><label>Address</label><input readonly="readonly" type="text" id="address" name="address"/></div>

            <div><label>Phone</label><input readonly="readonly" type="text" id="phone" name="phone"/></div>
            </br></div>
        </form>
    </div>  <!-- end guestinfo div -->

autocomplete_guests.php

<?php
//open connection
require_once('../config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

$return_arr = array();

/* If connection to database, run sql statement. */
if ($con)
{
    $fetch = mysqli_query($con, "SELECT * FROM guests WHERE lname like '%".mysqli_real_escape_string($con, $_GET['term'])."%'");

    /* Retrieve and store in array the results of the query.*/
    while ($row = mysqli_fetch_array($fetch, MYSQL_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['lname'] = $row['lname'];
        $row_array['fname'] = $row['fname'];
        $row_array['gender'] = $row['gender'];
        $row_array['address'] = $row['address'];
        $row_array['city'] = $row['city'];
        $row_array['state'] = $row['state'];
        $row_array['phone'] = $row['phone'];
        $row_array['email'] = $row['email'];
        $row_array['dob'] = $row['dob'];
        $row_array['zip'] = $row['zip'];

        array_push($return_arr,$row_array);
    }
}

/* Free connection resources. */
mysqli_close($con);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);
?>

Answer 1

你应该

1) 编写脚本标签，如 <script type="text/javascript">

2)将您的 JavaScript 放在页面底部，而不是表单的中间...(？!!)

3) 向该函数添加一个准备就绪的文档，以便在页面加载完成时执行该函数。 $( document ).ready(function() {

4) 确保已包含所有必需的 jquery 文件:Jquery Core、Jquery UI 等。

5) 如果您认为这是问题所在，请提供一些 CSS？

编辑:

忽略3。我刚刚查看了插件文档。