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

Question

出于不同的原因，我想摆脱 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

我知道与 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());
          }  
       });
    }
}); 

我已经测试过的:

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

所以，最后:

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

提前致谢!

Answer 1

我偶然发现了这篇准确描述了我面临的问题的帖子，但很惊讶没有看到任何答案。需要设置自动完成属性。在你的情况下

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

注意属性中的大写C。

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