jquery autocomplete result box tiny

Question

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

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 выходит правильно, и когда вы набираете первую букву правильного значения, крошечная (2px коробка) появляется под полем ввода, но если вы наберете в чем-то, что не делает exsist в db, он уходит, но возвращается, когда вы печатаете что-то, что есть.

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

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

Answer 1

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

Проблема в том, что вы не устанавливаете значение для свойства метки возвращаемого массива. Функция автозаполнения ожидает массив, содержащий объекты, которые являются прямыми строками (["item1", "item2", "item3"]) или имеют свойство метки. В базовом коде автозаполнения используется свойство label, чтобы узнать, что отображать. Проверьте пример нестандартных данных JQuery-UI, чтобы получить лучшее представление о том, как ваш JSON ojbect должен быть отформатирован: 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); 
     } 
    }); 
});