JQuery的自动完成结果 [英] JQuery autocomplete result

问题描述

您好我使用的自动完成功能，允许用户搜索存储在MySQL数据库的场地。自动完成插件目前上市地点，当用户使用结果处理开始输入并打印选择的地点。

Hello I am using autocomplete to allow users to search venues stored in a MySQL database. The autocomplete plugin is currently listing the venues when the user begins typing and prints the selected venue using the result handler.

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

I would like to also print the address, phone number and website of the venue as well but I am not sure how to do this.

我有自动完成插件运行PHP脚本打印出从数据库会场名称。我不知道如何检索数据库中的其他领域，而不显示自动完成输入字段...

I have the autocomplete plugin running a php script to print out the venue names from the database. I am not sure how to retrieve the other fields in the database without displaying the autocomplete input 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的侧搜索结果中显示更多的领域。

The php above only select the club name because when I try to select more fields they display in the search results on the JQuery side.

我是新来的JQuery让我有点失落...有什么建议？

I am new to JQuery so I am a little lost... Any suggestions?

推荐答案

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

There are a few ways to do it, but this is the easiest:

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

You want to return the data from the server like this. The first column should contain the value you want to retrieve in the end:

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

然后你要使用的 formatItem 和 formatValue 在你的自动完成功能的回调：

And then you want to use the formatItem and formatValue callback in your autocomplete function:

$(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);
      });
});

此外，您没有来自用户逸出的输入和因此具有讨厌vunerability SQL注入的

这篇关于JQuery的自动完成结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！