jqueryUI自動完成與額外的數據？

使用jQueryUI Autocomplete jqueryUI自動完成與額外的數據？

我想從框中附加一些其他數據到結果列表。例如，我的數據集可能看起來像：

[ 
    { 
     "name": "John's wild bacon emporium", 
     "code": "BACON" 
    }, 
    { 
     "name": "Jill and Jack's well", 
     "code": "WELL" 
    }, 
    { 
     "name": "Herp and derp", 
     "code": "HD" 
    } 
]

但jQueryUI的文檔說，它希望字符串的平面數組。

用戶將按名稱搜索，而不是代碼（讓我們假裝）。更重要的是，我希望能夠訪問select: function(event, ui) {/*...*/}時的代碼，無論是通過data-xxx還是其他伏都教。我想避免使用第二個列表來匹配字符串與標籤內容（假設我們可能有重複的名字，用戶不會感到困惑），我只是想將代碼數據粘貼到名稱標籤上。

像這樣的問題是asked in 2008，但從那時起該插件不再有.result()了。

來源

2011-05-03 Incognito

但jQueryUI文檔說，它想要一個平面字符串數組。

Actually：

本地數據可以是一個簡單字符串數組 的，或者它包含對象爲每個項目陣列中的，與任一一個標籤或值財產或兩者。

所以只要你的數據有至少一個value屬性陣列中的每個對象，小部件可以處理它：

[ 
    { 
     "name": "John's wild bacon emporium", 
     "code": "BACON", 
     "value": "Bacon", 
    }, 
    { 
     "name": "Jill and Jack's well", 
     "code": "WELL" 
     "value": "Well" 
    }, 
    { 
     "name": "Herp and derp", 
     "code": "HD", 
     "value": "Herp" 
    } 
]

用戶的查詢將針對value屬性相匹配（注意標籤不是必需的;僅當您想在自動填充選項列表中顯示與value不同的東西時才指定它）。

您可以訪問額外的數據有關的項目select事件處理中：

select: function(event, ui) { 
    alert(ui.item.code); // Access the item's "code" property. 
}

希望有所幫助。這裏有一個簡單的例子：http://jsfiddle.net/vR3QH/。我刪除了name屬性，而只是使用了value屬性。每次選擇某個項目時，input元素都會更新爲屬於所選項目的屬性值。

來源

2011-05-03 17:02:01

謝謝！雙倍感謝jsfiddle！今天學到的經驗：慢下來，閱讀你認爲你知道的東西，因爲你掃描了它們。 – Incognito 2011-05-03 17:36:35

@ user257493：沒問題！他們確實應該讓文檔中的'source'選項更加明顯。 – 2011-05-03 18:10:36

「名稱」屬性在這裏是誤導性的，因爲正確的鍵是「標籤」。 – lav 2017-12-15 08:01:38

jqueryUI自動完成與額外的數據？

回答

相關問題