jQuery UI自动完成显示AJAX源的标签和值

Rel*_*elm 3 javascript ajax jquery jquery-ui jquery-ui-autocomplete

我有AJAX源的jQuery UI自动完成输入,我想显示标签而不是id; 但我的代码显示搜索结果何时返回.我怎样才能展示标签?

PHP:

<?php
require_once '../php/db_conx.php';
$req = "SELECT * 
        FROM ads 
        WHERE bbookname LIKE '%" . strtolower(mysql_real_escape_string($_REQUEST['term'])) . "%' ";
$query = mysql_query($req);
while ($row = mysql_fetch_array($query)) {
    $return = array(
        'label' => $row['bbookname'] . ' ' . $row['bbookschool'],
        'value' => $row['adid']
    );
}
echo json_encode($return);
?>
Run Code Online (Sandbox Code Playgroud)

jQuery的/ AJAX:

$("#BooksSearchInput").autocomplete({
    source: '../Search/BP_Books_Search.php',
    minLength: 1,
    autoFocus: false,
    select: function(event, ui) {
        var SearchBookVal = (ui.item.value)
        $.ajax({
            type: "POST",
            data: {
                data: SearchBookVal
            },
            url: "../php/SearchBooks_results.php"
        }).done(function(feedback) {
            $('#booksads').html(feedback)
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

请注意,我确实需要adid在JavaScript回调中提供,因为我使用它来引用结果.

Sal*_*n A 6

你的代码中有一些错误.

首先,PHP脚本中的以下行:

$return = array(...)
Run Code Online (Sandbox Code Playgroud)

表示返回变量将在每次迭代时被覆盖,结果将始终是包含一个项目的数组(或者null如果找不到匹配的行,则为PHP警告和字符串).修理:

$return = array();
while ($row = mysql_fetch_array($query)) {
    $return[] = array(
        "label" => $row["bbookname"] . " " . $row["bbookschool"],
        "value" => $row["adid"],
        // you can add additional keys without causing problems
        "feedback" => $row["feedback"]
    );
}
echo json_encode($return);
Run Code Online (Sandbox Code Playgroud)

其次,要显示在文本框中可以使用代码标签onFocus,并onSelect这样的回答:

// ...
focus: function (event, ui) {
    event.preventDefault();
    $(this).val(ui.item.label);
},
select: function (event, ui) {
    event.preventDefault();
    $(this).val(ui.item.label);
    $("#booksads").html(ui.item.feedback);
}
// ...
Run Code Online (Sandbox Code Playgroud)