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

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

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

Answer 2

我发现发布的代码存在一些问题。首先，返回的json将始终只返回一行，即最后一行，因为您在每个循环上覆盖$ return。这是代码应该如何阅读

$return[] = array ('label' => $row['bbookname'] . ' '.$row['bbookschool'],
'value' => $row['adid']
);

这将返回所有匹配的行。其次，您将数组中的数据库值包含在值键中。如果您不想显示数据库ID，请不要将其包含在返回的json中。

$return[] = array ('label' => $row['bbookname'] . ' '.$row['bbookschool');

如果您在返回的json中需要数据库ID，但又不想在屏幕上显示它，则应更改返回数据的处理方式。现在，您通过调用HTML函数将整个结果集输出到屏幕。

您的查询使用已弃用的mysql_query函数，正在查找$ _REQUEST ['term']，但您的ajax代码正在使用数据作为变量名称发送值。

  data: {data:SearchBookVal},

应该阅读

  data: {term:SearchBookVal},

Answer 3

在从自动填充列表中选择项目时，文本框会显示该项目的“值”属性。如果您希望bookchool的书名显示为值，则可以使用与标签相同的字符串串联。由于您需要ajax请求的adid，因此可以为其添加其他参数。例如，

$ return = array（）;

while（$ row = mysql_fetch_array（$ query））

{

 $dataItem = array (

   'label' => $row['bbookname'] . ' '.$row['bbookschool'],

   'value' => $row['bbookname'] . ' '.$row['bbookschool'],

   'id' => $row['adid']

 );

 $return.push($dataItem);

}

编辑：要返回查询返回的所有行，必须使用结果构造值数组，并返回该数组。相反，当前代码将仅返回查询结果的最后一行。

Answer 4

使用警报或日志记录查看对象ui，adid存储的属性，尝试

alert(JSON.stringify(ui));

Answer 5

尝试这样的事情

$main_arr = array();
while($row = mysql_fetch_array($query))
{
    $json_arr = array();
    $json_arr['label'] = $row['bbookname'] . ' '.$row['bbookschool'];
    $json_arr['value'] = $row['adid'];
    array_push($main_arr,$json_arr);
}
echo json_encode($main_arr);

Answer 6

试试这个：

$return = array();
array_push($return,array("value"=>$row['adid'],"label"=>$row['bbookname'] . ' '.$row['bbookschool']));
$json = json_encode($return);
echo $json;

并使用以下内容在文本框中显示标签：

$('#booksads').html(ui.item.label)  //if you want display value then change it to ui.item.value

或 see these

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

6 个答案: