如何在首次點擊文本框時顯示自動完成下拉菜單？

我正在使用一個Angular md-autocomplete，它在第一次輸入文本框後開始向用戶顯示下拉列表中的自動完成選項。無論如何，當用戶第一次點擊文本框時，顯示此下拉菜單？如何在首次點擊文本框時顯示自動完成下拉菜單？

這裏是MD-自動完成HTML：

<md-autocomplete flex 
       role="combobox" 
       md-selected-item="text" 
       md-no-cache="true" 
       md-search-text="searchText" 
       md-search-text-change="searchTextChange(searchText)" 
       md-items="item in getMatches(searchText)" 
       md-item-text="item.autocompleteVal" 
       md-min-length="0" 
       md-selected-item-change="$parent.selectedItemChange(item)" on-enter ng-cloak> 
          <span id="autocompleteText" md-highlight-text="searchText" md-highlight-flags="^i">{{item.autocompleteVal}} </span> 
</md-autocomplete>

來源

2016-09-09 Nick

您打算在下拉菜單中顯示什麼？ – mindparse

嘗試github.com/tnr2394/autoCompleteTextbox ..它提供了很多定製。 –

@midparse，在用戶採取任何操作之前，自動完成是用上下文填充的。當用戶點擊自動填充時，我想根據文本框中的內容顯示結果。 – Nick

好像演示從網站的作品如你預期。 https://material.angularjs.org/latest/demo/autocomplete

來源

2016-09-12 12:24:51

角形2和材料2，設置在valueChanges()觀察到的控制無效的startWith()將顯示所有的值。省略這將導致用戶首先需要輸入值來查看結果。

所有數值顯示在重點：

this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges 
    .startWith(null) 
    .map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));

顯示，直到沒有找到值：

this.filterFuelTypeObservers.push(newFormGroup.controls.fuelType.valueChanges 
    .map(value => value ? this.fuelTypeFilter(value) : this.fuelTypes));

我沒有，但我想你可以玩弄startWith()設置焦點名單也被某種東西過濾。

來源

2017-07-03 17:15:45 Hodglem

我有同樣的問題，但MD-最小長度的值設置爲零開始工作

md-min-length="0"

來源

2017-10-03 09:28:53

正如@Hodglem指出的，目前的材料文檔使用可觀察的FormControl對象的valueChanges檢測更改並過濾要在自動填充面板上顯示的選項。它們將初始值初始化爲「null」，以便所有可用選項都將顯示。但是，通常您的選項列表來自服務（與我的用例相同），當startsWith(null)運行時，您的列表爲空，特別是如果此代碼在ngOnInit()方法中，就像它在物料文檔中一樣。此方法立即運行，而服務需要時間來填充列表。

如果沒有選項，自動完成足夠智能，無法打開面板，所以初始關注元素將無法打開面板，因爲沒有選項可供顯示。即使列表從服務中填充後，過濾器也只會在控件的值發生變化時觸發，所以直到用戶開始輸入時，自動填充的選項列表纔會保持爲空，因此面板保持關閉狀態。

我有兩個解決方案：

移動可觀察設立了ngOnInit()方法，併爲隨後的調用來檢索選項的服務subscribe()方法。設置完列表後，運行可觀察設置。現在面板將打開焦點，因爲面板可以顯示選項。（確保FormControl的初始化保持在ngOnInit()方法中，或者模板中的綁定將引發錯誤。）
劃傷可觀察的方法，並將過濾器方法綁定到控件的本機事件，例如(focus)和(input)。在過濾方法中，檢查傳入的值是否爲空，如果是，則返回整個列表。這樣，每當用戶單擊控件或更改其值時，都會觸發過濾器，並且只要用戶至少點擊過一次該服務填充了選項列表，面板將顯示。根據您的使用情況，我發現在用戶移動鼠標並專注於控件時，服務已交付貨物，並且面板打開。

來源

2017-12-15 16:51:06

如何在首次點擊文本框時顯示自動完成下拉菜單？

回答

相關問題