JQuery自动完成结果

您好我正在使用自动完成function，允许用户搜索存储在MySQL数据库中的场所。 自动完成插件当前列出了用户开始输入时的场所，并使用结果处理程序打印所选场地。

我也想打印场地的地址，电话号码和网站，但我不知道该怎么做。

我有运行php脚本的autocomplete插件，用于打印数据库中的场地名称。 我不知道如何在不显示自动完成输入字段的情况下检索数据库中的其他字段…

这是我到目前为止：

JQuery的

$(document).ready(function(){ $("#example").autocomplete("search.php", {width: 260, selectFirst: false}).result(function(event, data, formatted) { $("#result").html( !data ? "No match!" : "Selected: " + formatted); }); }); 

PHP

 $search = $_GET['q']; $search = "%".$search."%"; $result = mysql_query("SELECT club_name FROM clubs WHERE club_name LIKE '$search'") or die('Something is wrong'); while($value = mysql_fetch_array($result)){ $club = $value[club_name]; echo "$club\n"; } 

上面的php只选择了俱乐部名称，因为当我尝试选择更多的字段时，它们会显示在JQuery端的搜索结果中。

我是JQuery的新手，所以我有点失落……有什么建议吗？

Answer 1

有几种方法可以做到，但这是最简单的方法：

您想要像这样从服务器返回数据。 第一列应包含您要在最后检索的值：

 title|address|phone|web title|address|phone|web title|address|phone|web 

然后，您希望在自动完成function中使用formatItem和formatValue回调：

 $(document).ready(function(){ $("#example").autocomplete("search.php", { width: 260, selectFirst: false, formatItem: function(row){ var ret = '' + row[0] + '
'; ret += '' + row[1] + ' '; ret += '' + row[2] + ' '; ret += '' + row[3] + ' '; return ret; }, formatValue: function(row){ return row[0]; // We only want the first value to be searched } }).result(function(event, data, formatted) { $("#result").html( !data ? "No match!" : "Selected: " + formatted); }); }); 

此外，您没有逃避用户的输入，因此具有令人讨厌的SQL注入的可用性