php - JQuery 自动完成结果

Question

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

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

我有一个自动完成插件，运行一个 php 脚本来从数据库中打印出 field 名称。我不确定如何在不显示自动完成输入字段的情况下检索数据库中的其他字段...

这是我到目前为止所拥有的:

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 

然后你想使用 formatItem and formatValue自动完成函数中的回调:

$(document).ready(function(){
    $("#example").autocomplete("search.php", {
        width: 260, 
        selectFirst: false,
        formatItem: function(row){
          var ret = '<span class="title">' + row[0] + '</span><br />';
          ret += '<span class="address">' + row[1] + '</span> ';
          ret += '<span class="phone">' + row[2] + '</span> ';
          ret += '<span class="web">' + row[3] + '</span> ';
          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 注入(inject)漏洞