У меня проблемы с отображением переменных json из jquery autocomplete - PullRequest
Новая
       2

У меня проблемы с отображением переменных json из jquery autocomplete

0 голосов
/ 22 марта 2012
  • Имена не отображаются в выпадающем списке автозаполнения
  • И как я могу назначить каждую переменную для определенного текстового поля, когда я получаю ответ

HTML: 

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<input type="text" id="name" />
<input type="text" id="id" />
<input type="text" id="tel" />
<script> $("#name").autocomplete({ source: "php/company.php" });  </script>
</body>
</html>

PHP: 

$term = strtolower($_GET["term"]);

$sql = "select ID,NAME,TEL from COMPANY where NAME like '%$term%' order by NAME";
$result = mysql_query($sql, DBCONN) or die ("<br>MySQL Error: " . mysql_error(DBCONN));
while($row = mysql_fetch_array($result)) 
{
    $row_set = array( 
                "label" => $row['NAME'], 
                "id" => $row['ID'],
                "tell" => $row['TEL'] );
}
echo json_encode($row_set);

FIREBUG JSON RESPONSE: 

{"label":"MacDonald","id":"1","tel":"1-800-4444"}

Ответы [ 2 ]

0 голосов
/ 22 марта 2012

RTFM :

Данные из локальных данных, URL-адреса или обратного вызова могут быть двух вариантов:

  • Массив строк:
  • Массив объектов со свойствами меток и значений

Ваш ответ json на самом деле не является массивом, не так ли?Также вы можете обновить свое автозаполнение только для одного поля. 

$("#name").autocomplete({ source: function callback(term, autocomplete) {
    $.getJSON("php/company.php?term="+term, function(data) {
        // do the magic here: extract an option array from your data, e.g.
        var arrayOfStrings = data.names;
        autocomplete(arrayOfStrings);
    });
});

Я не понимаю, что вы хотите делать с другими данными, когда при поиске в вашей БД определенного имени вы не сможетеавтозаполнение поля ввода номера телефона, не так ли?

РЕДАКТИРОВАТЬ: Ваша проблема в том, что ваш ответ json в настоящее время выводит последнее из соответствующих имен в виде объекта.Если вы вместо этого вернете массив, функция автозаполнения будет полезна.Исправлено несколько ошибок: 

$term = mysql_real_escape_string(strtolower($_GET["term"]));

$sql = "select ID,NAME,TEL from COMPANY where NAME like '%$term%' order by NAME";
$result = mysql_query($sql, DBCONN) or die ("{\"error\":\"" . mysql_error(DBCONN) . "\"}");
$output = array();
while($row = mysql_fetch_array($result)) {
    $row_set = array( 
        "label" => $row['NAME'], 
        "value" => $row['NAME'], 
        "id" => $row['ID'],
        "tell" => $row['TEL'] );
    $output[] = $row_set;
}
echo json_encode($output);

Если вы сделаете это пользовательской функцией обратного вызова с настроенными вызовами ajax (см. Выше), теперь вы можете проверить наличие data.error перед попыткой извлечь массив.* Теперь вы можете поиграть с пользовательскими элементами отображения, фокусировки и выбора событий.Например, с помощью

  • .data( "autocomplete" )._renderItem (см. Источник связанного примера) вы можете отображать пользовательские элементы списка
  • на .autocomplete({focus:...})вы можете установить #id и #tel на их соответствующие значения и
  • на .autocomplete({select:...}) вы можете заморозить #id и #tel (отключить входы)
0 голосов
/ 22 марта 2012

По умолчанию плагин ожидает массив строк, а не объектов.

Вам необходимо использовать пользовательский рендеринг данных . 

$("#name").autocomplete({
        ....
        focus: function( event, ui ) {
            $( "#name" ).val( ui.item.label );
            return false;
        }
        ....
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.id + "</a>" )
            .appendTo( ul );
    };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...