jQueryUI自動完成並不真正自動完成

Question

我正在使用jQueryUI自動完成functionality with custom data and display，但只能成功地讓它部分工作。實際的保存功能很好，但我似乎無法獲得UX的權利。

如果我點擊一個空白框，自動完成下拉菜單會出現，每個選項都會顯示。但是，如果我開始輸入，則下拉列表不會被過濾，它會完全消失。在這種情況下，選項列表非常小，我們正在使用這種技術來減少創建新記錄的拼寫錯誤。例如，一個下拉菜單包括2個選項：Potomac Electric Power Co.和Virginia Electric & Power Co.幾乎不需要大量過濾，但我期望如果有人開始輸入「Poto」或甚至「poto」，該列表將會從2到1選項進行過濾。

這不會發生在我身上。因爲他們的例子完全像我期望的那樣工作，所以我必須錯過一些東西，但也許我剛剛過去了。

 $provider_name.autocomplete({ 
     source: data.Utilities, 
     minLength: 0, 
     focus: function(event, ui) { 
      $provider_name.val(ui.item.Utility.name); 
      return false; 
     }, 
     select: function(event, ui) { 
      $provider_name.val(ui.item.Utility.name); 
      $provider_id.val(ui.item.Utility.id); 
      return false; 
     } 
     }).data('autocomplete')._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append('<a>' + item.Utility.name + '</a>') 
      .appendTo(ul); 
     }; 

任何輸入將不勝感激。謝謝。

Answer 1

的問題是，autocomplete小部件希望自己的數據被格式化的方式如下：

[ 
    { label: 'Potomac Electric Power Co.', value: '1234' }, 
    { label: 'Virginia Electric & Power Co.', value: '1234' } 
] 

（如果你的名字/值是相同的，你只需要提供的價值屬性）

你做這件事的方式和jQueryUI的演示方式之間的區別在於它們沒有使用像你這樣的中間對象。您已經告訴小部件如何渲染每個項目，但小部件在搜索時不知道如何找到每個候選人。

我會通過使用$.map(...)函數按摩您的數據來解決這個問題。這將允許您將數據轉換爲更友好的數組。喜歡的東西：

var friendly = $.map(data.Utilities, function(el) { 
    return { label: el.name, value: el.id }; 
}); 

，然後改變你的select事件處理程序：

select: function(event, ui) { 
    $provider_name.val(ui.item.label); 
    $provider_id.val(ui.item.value); 
    return false; 
} 

注意，您可以在source陣列的每個對象提供更多的信息。你甚至可以在事件處理程序中訪問這些數據。只要確保提供label和value屬性。