在 jQueryUI 自动完成回调中访问 JSON 响应数据

Question

我正在使用 jQueryUI 自动完成功能来搜索 MySQL 数据库。当用户在搜索字段中按下回车键时，我想用从 DB 返回的结果填充一个 div。

代码有效并且确实返回了一个自动完成的建议列表。

但是，我无法理解如何使用 select: 函数中返回的 JSON 数据，例如访问 JSON 对象中返回的 title 和 author 字段。请参阅 jQuery 代码示例中指示的 alert() 行。

ui.item 警报为 [object Object]

ui.item.title 警报未定义。

我还能尝试什么？
另外，item 使用的标签是否正确？如果是这样，为什么？这是从哪里来的（我使用了item，因为在我审查的几个示例中一直使用它。）

我的 jQuery：

$('#srxbks').autocomplete({
    source: "autocomplete_test.php",
    minLength: 1,
    select: function( event, ui ) {
        alert('You chose: ' + ui.item);   <=== THIS LINE <===
        var out = 'Title: ' + ui.item.title + '<br>';
        out += 'Author: ' + ui.item.author + '<br>';
        $('.booksTableDIV').val(out);
    }
});

我的 PHP：

<?php
include 'connect.php';

$term = strip_tags($_GET['term']);//retrieve search term sent by autocomplete

$qstring = "SELECT * FROM `books` WHERE `title` LIKE '%" .$term. "%'";
$query = mysql_query($qstring) or die(mysql_error());

while ($row = mysql_fetch_array($query)) {
    $row['title']=htmlentities(stripslashes($row['title']));
    $row['bid']=(int)$row['bid'];
    $row_set[] = $row['title'];
}
echo json_encode($row_set);

Answer 1

如果不知道 JSON 响应是什么，就很难给出准确的答案。

如您所见，警报并不是查看 javascript 对象的好方法。尝试使用console.log 在浏览器的开发者控制台中检查对象。这将帮助您找到正确的语法。

访问开发者控制台...

• ... 在 Chrome 中，在菜单中，转到查看 > 开发人员工具
• ... 在 Firefox 中，在菜单中，转到工具 > Web 开发人员 > Web 控制台
• ... 在 IE 中，... 不确定... 我现在在 Mac 上。它应该类似于上面的内容。我认为它也可以通过 F12 访问

在每一个中，都应该有一个控制台选项卡来查看使用console.log 记录的日志消息。

我怀疑您只需要执行 ui.item[0] 或 ui.item.title 之类的操作...但同样，如果没有 JSON 数据，我无法确定。