選擇框在清空時不刷新，然後添加選項

Question

Jsfiddle是here。

我有一個文本框，並且當用戶在框中輸入鍵時，multiple select框必須刷新它的選項。

在input change，我使用此代碼刷新select options，

$("select").empty() 
filteredOpts.map(function(val){ 
     $("select").append("<option name={0} value={0}>{0}</option>".format(val)) 
}) 

但是，視圖是沒有得到新的選項設置刷新。

當我移動到某個屏幕（例如，按ctrl + shift + c打開Chrome控制檯）時，視圖被刷新。同樣的行爲也可以在Firefox中看到，其中選擇框不顯示過濾選項，但當我去firebug控制檯並返回時，選擇框已刷新其選項。

Answer 1

這是因爲你只是處理Change事件，而不是像你說的那樣處理Input事件。 Change事件僅在元素模糊後觸發。

變化：

$("body").on("change", "#pattern", textChange) 

要：

$("body").on("input change", "#pattern", textChange) 

（你或許可以完全從下降Change事件，太）。

Working JSFiddle demo。

Answer 2

更改事件將在您將焦點移出文本框時觸發。使用keyup事件代替change請嘗試此$("body").on("keyup", "#pattern", textChange)。