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的新手,所以我有点迷路...有什么建议吗?
答
有几个方法可以做到这一点,但是这是最简单的:
你想从这样的服务器返回的数据。第一栏应包含要检索到底值:
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 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