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

问题描述

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

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

现在到过程：

打字：应用

服务器响应：

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

显示的数据列表建议：

apple
pinapple
snapper

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

打字：,在

服务器响应：

['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>

// 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，change -> 没有成功
手动触发事件：_this.focus() 或其他 --> 无响应
在数据列表上使用 JQuery show()
将选项嵌入到 HTML-select 中。在这种情况下，数据列表也无法按预期工作，但由 select 触发的下拉菜单可以正常工作并快速刷新。

所以，最后：

我怎样才能实现，在不按退格键的情况下键入字母时打开数据列表选项？

先感谢您！

标签： javascriptjqueryajaxhtmldatalist

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

问题描述

解决方案

推荐阅读