окно результатов автозаполнения jquery крошечный - PullRequest
Новая
       15

окно результатов автозаполнения jquery крошечный

3 голосов
/ 03 января 2012

У меня странная проблема с интерфейсом автозаполнения. Я искал здесь, и я не могу найти ничего подобного.

http://jsfiddle.net/TYPfw/ имеет jquery и HTML, вот PHP. 

$return_arr = array();
$param = mysql_real_escape_string($_GET['term']);
$fetch = mysql_query("SELECT * FROM customers WHERE company like '%$param%'"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['company'] = $row['company'];

    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

JSON выводится правильно, и когда вы вводите первую букву правильного значения, в поле ввода появляется маленький TINY (поле 2 пикселя), но если вы набираете что-то, чего не существует в БД, он выходит прочь, но возвращается, когда вы печатаете что-то, что есть.

Я использовал этот похожий код во многих других проектах, и я никогда не сталкивался с этой проблемой. Есть мысли о том, что мне не хватает? Слишком долго смотрел на это для такой маленькой задачи.

Изображение коробки для справки. http://imgur.com/iwLlk

1 Ответ

3 голосов
/ 04 января 2012

Извините за мой предыдущий ответ, я не видел jsFiddle, когда впервые прочитал ваш вопрос.

Проблема в том, что вы не устанавливаете значение для свойства label возвращаемого массива. Функциональность автозаполнения ожидает массив, который содержит объекты, которые являются либо прямыми строками (["item1", "item2", "item3"]), либо имеют свойство метки. Базовый код автозаполнения использует свойство label, чтобы знать, что отображать. Посмотрите пример пользовательских данных jQuery-ui, чтобы лучше понять, как должен отформатироваться ваш объект json: http://jqueryui.com/demos/autocomplete/#custom-data

В настоящее время ваш возвращенный JSON будет выглядеть примерно так: 

[
  { id: "companyId", company: "company Name" },
  { id: "AnotherID", company: "another company" }
]

Однако у ваших объектов нет свойства метки. Изменение PHP для установки метки (вместо компании) следующим образом должно исправить список, который не заполняется: 

$return_arr = array();
$param = mysql_real_escape_string($_GET['term']);
$fetch = mysql_query("SELECT * FROM customers WHERE company like '%$param%'"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['label'] = $row['company'];

    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

И вы захотите обновить свой JavaScript, чтобы учесть новый формат: 

$(function() {
    $("#company").autocomplete({
        source: "bin/view_customers.php",
        minLength: 1,
        select: function(event, ui) {
            $('#id').val(ui.item.id);
            $('#company').val(ui.item.label);
        }
    });
});
...