JQuery 自动完成结果

Posted 2023-02-24

【中文标题】JQuery 自动完成结果

【英文标题】：JQuery autocomplete result

【发布时间】：2011-01-04 11:51:03

【问题描述】：

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

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

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

这是我目前所拥有的：

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 新手，所以我有点迷茫……有什么建议吗？

【参考方案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 注入有一个讨厌的漏洞

【讨论】：

谢谢，我会试一试。至于不转义，我仍在测试脚本，所以一旦它工作，我将添加安全功能。再次感谢！

@mrdthomas 太好了！如果它对您有用，请务必回来并将答案标记为已接受，以便未来的搜索者知道它是正确的......而且我们都得到了代表点：）欢迎来到 Stack Overflow！

@Doug Neiner，您提供的代码运行良好，谢谢！