JQuery autocomplete result - php

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