HTML 5 datalist not refreshing from javascript in Chrome and IE

Question

I have a HTML 5 input (type="text") binded to a datalist which is populated after 3 characters are entered. Datalist is initially empty when page is loaded. I'm using AJAX calls from Jquery to update datalist based on search criteria. If I type "tes" in the text input, datalist that is refreshed is not showing unless I click in text input in Chrome and IE. Once I click in the text input element, list shows. Update list shows fine in Firefox if matching entries are found.

I tried to used focus and click events from javascript so list shows as text changes but nothing works. Any help will be greatly appreciated.

html (in gsp)

<input type="text" name="search" id="search" list="myList"  autocomplete="off" autofocus="true" required="true"/>
<datalist id="myList"> </datalist>

Javascript (in gsp)

<r:script>
   $('#search').on('input',function(e){
   var searchFilter = $(this).val()
   <g:remoteFunction action="searchMe" onSuccess="populateList(data)" params="  {searchFilter: searchFilter}"/>
  });

  function populateList(data) {
      var searchFilter = $('#search').val();
      var dataList = $("#myList");
      dataList.empty()

      if (searchFilter.length>2){
      if(data.results.length) {
        for(var i=0, size=data.results.length; i<size; i++) {
            var option = $("<option></option>").attr("value", data.results[i].name);
            dataList.append(option)
        }
       }
   }
}
</r:script>

Answer 1

A workaround was posted here : How do you refresh an HTML5 datalist using JavaScript?

It uses jquery focus() function to force datalist display when populated.

Just add this call at the end of your own populate function.

Answer 2

I think your problem is in this line:

$('#search').on('input',function(e){

'input' is not an event. I think what you're wanting is 'keyup' or 'keydown'. See the jquery api documentation for 'on' here http://api.jquery.com/on/

Firefox is great, but it's forgiving nature sometimes hides errors that other browsers will trip over. Firefox sometimes knows what you meant to say and just works anyway.