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

我有 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);
?>

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)
        });
    }
});

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

解决方法

你的代码中有一些错误.

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

$return = array(...)

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

$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);

其次,要在文本框中显示标签,您可以使用onFocus和onSelect的代码来自this answer：

// ...
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);
}
// ...