在 Firefox 中使用 AJAX 动态加载数据列表选项答案

【问题标题】：Dynamic loaded datalist options with AJAX in Firefox在 Firefox 中使用 AJAX 动态加载数据列表选项
【发布时间】：2018-10-26 15:54:42
【问题描述】：

出于不同的原因，我想摆脱 Jquery UI 自动完成功能并将其替换为具有动态加载选项字段的 HTML5 数据列表。我在这个话题上搜索了好几天，在 stackoverflow 上也找到了不同的答案，比如How do you refresh an HTML5 datalist using JavaScript?，我认为这与我搜索的内容非常接近。

我想要选择标签的数据列表，它将在输入字段中以逗号分隔。问题是只有第一个标签才能正确显示数据列表。键入“字母”时未显示第二个的建议。

现在进入流程：

键入：应用程序

服务器响应：

['apple','pinapple','snapper']

显示的数据列表建议：

apple
pinapple
snapper

我现在选择：apple，写入输入字段，然后：

输入：,in

服务器响应：

['intest','instructor','insula']

显示的数据列表建议：没有，这就是问题

但是：

如果我现在按退格键并删除最后一个符号，则输入字段中现在是：

apple, i

然后 Firefox 显示为选项：

apple, intest
apple, instructor
apple, insula

我知道有一个比较值或者innerHTML的字段，所以我用：

<option value="apple, intest">apple, intest</option>

现在是代码示例：

HTML

<input list="autocompleteList" type="text" class="form-control" name="Tags" id="Tags">
<datalist id="autocompleteList"></datalist>

// Used for querying only the last word of input field
function extractLast( term ) { return split( term ).pop(); }

$( document ).on( "input","*[name=Tags]", function( e ) {

    var _this  = $(this);
    var input  = _this.val();
    var first_part;

    // If a first tag is already inserted, now extract it for later use
    if ( input.split(/,|,\s*| /).length > 1 ) {
        var temp   = input.split(/,|,\s*| /);
        first_part = temp.filter(function (el) { return el.trim() != ""; }).slice(0,-1).join(', ') + ', ';
        console.log("EXTRACTED FIRST PART " + first_part);
    } else {
        first_part = '';    
    }

    if ( extractLast(input).length >= 2 ) {
        $.ajax({
        dataType: "json",
          type : 'POST',
          async:true,
          url: 'example.com/suggester',
            data: {term: extractLast( input )},
          success: function (data) {
                $("#autocompleteList").empty();
                for (i=0; i<data.length; i++) {
                    $("#autocompleteList").append('<option value="' + first_part + data[i] + '">' +  first_part + data[i] + '</option>');
                }                               

                // Array of Tags
                console.log("DATA FROM SERVER: " + data);

                // For inspection
               console.log("CONTENT OF AUTOCOMPLETE LIST: " + $('#autocompleteList').html());
          }  
       });
    }
});

我已经测试过的内容：

更改：从输入到 keypress、keyup、keydown、更改 -> 不成功
手动触发事件：_this.focus() 或其他 --> 无响应
在数据列表上使用 JQuery show()
将选项嵌入到 HTML 选择中。在这种情况下，datalist 也无法按预期工作，但由 select 触发的下拉菜单可以正常工作并快速刷新。

所以，最后：

我怎样才能实现在输入字母时打开数据列表选项而不按退格键？

提前谢谢你！

【问题讨论】：

标签： javascript jquery ajax html datalist

【解决方案1】：

我偶然发现了这篇文章，它准确地描述了我所面临的问题，并且惊讶地发现没有答案。需要设置自动完成属性。你的情况

<input autoComplete="off" list="autocompleteList" type="text" class="form-control" name="Tags" id="Tags">

注意属性中的大写 C。

根据this 的帖子，问题出在使用驼峰式属性的 React 中。我没有使用 React，但它仍然对我有用。

【讨论】：

这也解决了我的问题，这既很棒又很烦人，因为我的客户希望同时打开数据列表功能和自动完成功能......

【解决方案2】：

我还遇到了必须通过 jQuery 使用 Ajax 填充 HTML 数据列表的问题，尽管在 Edge 和 Chrome 上工作，但如果在 Firefox 上不按退格键，元素将不会显示。 Shrestha Ghosh 发布的解决方法对我不起作用，here 发布的另一个解决方法也没有，它建议使用 JavaScript/jQuery 设置 autocomplete="off" 然后立即回到 autocomplete="on"（即分别使用 Element.SetAttribute() 或 jQuery.attr() )。

相反，我注意到，如果我不聚焦并重新聚焦（即单击关闭然后单击）HTML input 元素，则会显示数据列表。因此，如果与此问题相关的任何人都可以使用 jQuery，那么 jQuery.Blur() 和 jQuery.Focus() 可能也值得尝试；这是我还没有看到发布的解决方案（在 Firefox 80.0 64 位上测试）。

即：

$("#your-input-element").keypress(function(){
    $(this).blur();
    $(this).focus();
}

注意keypress 而不是keydown；这样可以避免在尝试使用向下箭头键向下导航列表时触发模糊和焦点。这不是一个非常优雅的解决方案，但对于我的用例来说它工作得很好。

【讨论】：

【解决方案3】：

我在 Firefox 上遇到了类似的问题，即使结果返回 (JS HttpRequest) 下拉菜单也没有显示，我可以在 DOM 上看到它。

我的解决方案是添加空（如下所示）并将其替换为发送请求后的新数据。

<div class="form-group-input">
      <label for="client_name" class="hidden-label">Client Name</label>
      <input list="clients_list" autoComplete="off" type="text" name="client_name" id="client_name" placeholder="Client Name" >
      <datalist id="clients_list"><option value=""></datalist>
</div><!-- form group input -->

谢谢

【讨论】：