Результат автозаполнения JQuery

Question

Здравствуйте. Я использую автозаполнение, чтобы пользователи могли искать места, хранящиеся в базе данных MySQL. Плагин автозаполнения в настоящее время выводит список мест, когда пользователь начинает печатать, и печатает выбранное место, используя обработчик результатов.

Я хотел бы также напечатать адрес, номер телефона и веб-сайт места проведения, но я не уверен, как это сделать.

У меня есть плагин автозаполнения, выполняющий скрипт php для распечатки названий мест из базы данных. Я не уверен, как получить другие поля в базе данных без отображения поля ввода автозаполнения ...

Это то, что я имею до сих пор:

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

Я новичок в JQuery, поэтому я немного растерялся ... Есть предложения?

Answer 1

Есть несколько способов сделать это, но это самый простой:

Вы хотите вернуть данные с сервера, как это. Первый столбец должен содержать значение, которое вы хотите получить в конце:

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

И затем вы хотите использовать обратный вызов formatItem и 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-инъекции