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

Question

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

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

Answer 1

您的代码中有几处错误。

首先，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);

其次，要在文本框中显示标签，您可以使用来自 this answer 的 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);
}
// ...