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

Question

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

我想要选择标签的数据列表，将在输入字段中以逗号分隔。问题是数据列表只针对第一个标签正确显示。键入 "letters".

期间未显示第二个建议

现在进入流程：

输入：应用程序

服务器响应：

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

显示的数据列表建议：

apple
pinapple
snapper

我现在选择：apple，写入输入框，之后：

键入： ,in

服务器响应：

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

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

但是：

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

apple, i

然后 Firefox 显示为选项：

apple, intest
apple, instructor
apple, insula

我知道和value或者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>

JS

// 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());
          }  
       });
    }
});

我已经测试过的：

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

所以，最后：

我如何实现在不按退格键的情况下键入字母时打开数据列表选项？

提前致谢！

Answer 1

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

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

注意属性中的大写 C。

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

Answer 2

我还遇到了必须通过 jQuery 使用 Ajax 填充 HTML 数据列表的问题，尽管在 Firefox 上不按退格键，元素将不会显示边和Chrome。 Shrestha Ghosh 发布的解决方法对我不起作用，另一个解决方法也没有分别发布 here, which suggested setting the autocomplete="off" then immediately back to autocomplete="on" with JavaScript/jQuery (i.e. with Element.SetAttribute() or jQuery.attr()）。

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

即：

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

备注keypress instead of keydown；这避免了在尝试使用 down-arrow 键向下导航列表时触发模糊和聚焦。这不是一个非常优雅的解决方案，但对于我的用例来说它工作得很好。

Answer 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 -->

谢谢

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

Dynamic loaded datalist options with AJAX in Firefox

javascript

jquery

ajax

html

datalist