jquery自動完成結果框小

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在數據庫，它消失了，但當你打字的東西是回來的。

我在許多其他項目中使用了這個類似的代碼，我從來沒有遇到過這個問題。任何關於我失蹤的想法？一直在爲這樣一個小任務尋找這個太久。

圖片供參考。 http://imgur.com/iwLlk

Answer 1

對不起，我以前的答案，當我第一次看到你的問題時，我沒有看到jsFiddle。

問題是你沒有爲返回數組的label屬性設置一個值。自動完成功能期望包含直線字符串（["item1", "item2", "item3"]）或具有標籤屬性的對象的數組。底層的自動完成代碼使用label屬性來知道要顯示的內容。看看jQuery的用戶界面的自定義數據爲例來了解您的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); 
     } 
    }); 
});