如何根據數據源有條件地自動完成javascript中的文本字段？

Question

我希望能夠基於在查詢中鍵入的文本執行“條件自動填充”。 例如：

用戶可以：

鍵入“ f”，然后為所有字段名稱“ field_name”，“ field_age”提取建議名稱作為建議。

如果用戶然后鍵入或選擇“ field_name”，然后在框中鍵入“ =”，則將要求“ field_name”具有唯一的特定數據列表，例如[Albert，Bob，Clarisse]。

如果用戶隨后鍵入“”（空格），則將遠程拉入或訪問選項[“ AND”，“ OR”，“ ==”，“！=”。 一旦用戶選擇或鍵入“ ==”，然后根據到目前為止的當前字符串“ field_name ==''”，將使用列表[Albert，Bob，Clarisse]。

如果用戶改為鍵入field_age ...，則將專門針對年齡[7,3,6]的列表或json對象發出請求，然后將其彈出。 在搜索框中輸入的示例為：

field_name ='Albert'AND field_age ='7'

我已經看到了一個typeahead.js庫，但它似乎只是提取所有要自動完成的數據，而不是“按需提供數據”（在這種情況下，名稱和年齡。原因是名稱可能是巨大的，有很多名稱，但我不想讓客戶端下載每個可用字段的所有值，因為這將是一個很大的下載）。

做這個的最好方式是什么？ typeahead.js是否更好地支持此庫或某些替代庫？

Answer 1

我的建議是使用兩個盒子，這對我來說似乎是最合乎邏輯的方法。 第一個按名稱縮小范圍，第二個按年齡或其他字段縮小范圍。 這樣，您就可以執行AND / OR SQL語句。 當然，您也可以限制從服務器發送回的響應數量，因為您是正確的，回送上千個自動完成沒有什么用。 至於哪個庫，此時您應該可以使用所需的任何自動完成庫，其中可能有幾十個。 jQuery UI，dojo或我最喜歡的Select2。

當然，您也可以編寫自己的方法來利用單個文本框，而不是兩個。 在這種情況下，我建議在服務器端而不是客戶端上執行此操作。 我不知道任何可以在客戶端或服務器端自動執行此操作的庫。

Answer 2

dijit / form / ComboBox不能在這里提供您想要的東西嗎？

您的問題有很多類似的答案張貼在這里-瀏覽它們...