Question

我有一个HTML 5输入（type =“text”）绑定到一个数据列表，该数据列表在输入3个字符后填充。加载页面时，Datalist最初为空。我正在使用Jquery的AJAX调用来根据搜索条件更新datalist。如果我在文本输入中键入“tes”，则除非我在Chrome和IE中单击文本输入，否则不会显示刷新的数据列表。单击文本输入元素后，列表显示。如果找到匹配的条目，更新列表在Firefox中显示正常。

我尝试使用焦点并点击javascript中的事件，因此列表显示为文本更改但没有任何效果。任何帮助将不胜感激。

html（在gsp中）

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

Javascript（在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

此处发布了一个解决方法： How do you refresh an HTML5 datalist using JavaScript?

它使用jquery focus（）函数在填充时强制显示数据列表。

只需在您自己的填充函数的末尾添加此调用。

Answer 2

我认为你的问题就在这一行：

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

'input'不是一个事件。我认为你想要的是'keyup'或'keydown'。请参阅此处http://api.jquery.com/on/

的“on”的jquery api文档

Firefox很棒，但它的宽容性有时会隐藏其他浏览器会绊倒的错误。 Firefox有时会知道你的意思，并且无论如何都能正常工作。

HTML 5数据表不能从Chrome和IE中的javascript刷新

2 个答案: