JQuery autocomplete result

Question

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.

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...

This is what I have so far:

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";
        }

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.

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

Answer 1

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 

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

Also, your are not escaping the input from the user and as such have a nasty vunerability for SQL injection