The select box is not updated when empty, and then adds the return options

Question

Jsfiddle here .

I have a text field and as the keys of the user type in the field, the field multiple selectshould update its parameters.

In input change, I use this code to update select options,

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

But the view is not updated with the new set of parameters.

When I go to any screen (for example, clicking ctrl + shift + cto open the chrome console), the view will be updated. The same behavior is observed in firefox, when the filtered parameters are not displayed in the selection field, but when I go to the console firebugand return, the selection field has updated its parameters.

Answer 1

, Change, Input, . .

:

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

To:

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

(, "" ).

JSFiddle.

Answer 2

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