JQuery自动完成结果

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

我也想打印地址，电话号码和网站的地点，但我不知道如何做到这一点。

我有自动完成插件运行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选择俱乐部的名字，因为磨片n我尝试选择更多的字段，它们显示在JQuery端的搜索结果中。

我是JQuery的新手，所以我有点迷路...有什么建议吗？

来源

2010-01-13 mrdthomas

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

你想从这样的服务器返回的数据。第一栏应包含要检索到底值：

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注入具有令人讨厌的可调度性

来源

2010-01-13 04:45:14

谢谢我会给这个镜头。至于没有转义，我仍在测试脚本，所以我会在安全功能发挥作用时添加它。再次感谢！ – mrdthomas 2010-01-13 21:51:09

@mrdthomas太棒了！如果它适合你，一定要回来，并将答案标记为已接受，以便将来的搜索者知道它是正确的......再加上我们都得到了rep points :)欢迎来到Stack Overflow！ – 2010-01-13 21:53:38

@Doug Neiner，您提供的代码非常好用，谢谢！ – mrdthomas 2010-01-14 01:03:04

JQuery自动完成结果

回答

相关问题