Question

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

我想要选择标签的数据列表，这些标签将在输入字段中用逗号分隔。问题在于，仅针对第一个标签正确显示数据列表。键入“字母”时不会显示第二个建议。

现在进入流程：

键入：应用

服务器响应：

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

显示的数据列表建议：

apple
pinapple
snapper

我现在选择：苹果，将其写入输入字段，然后：

键入：，在

中

服务器响应：

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

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

但是：

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

apple, i

然后Firefox显示为选项：

apple, intest
apple, instructor
apple, insula

我知道存在与value或innerHTML Field的比较，因此我使用：

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

我已经测试过的内容：

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

所以，最后：

我如何实现在键入字母而不打退格时打开datalist选项？

提前谢谢！

Answer 1

我偶然发现了这个帖子，该帖子准确地描述了我所面临的问题，并且惊讶地发现没有答案。需要设置自动完成属性。就您而言

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

在属性中注意大写字母C。

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

Answer 2

我还遇到了必须通过jQuery用Ajax填充HTML数据列表的问题，并且即使在Edge和Chrome上进行工作，如果不在Firefox上按下退格键，元素就不会显示出来。 Shrestha Ghosh发布的变通办法对我不起作用，here也没有发布另一个变通办法，该变通办法建议先设置autocomplete="off"，然后立即使用JavaScript / jQuery（即{{ 3}}或Element.SetAttribute()。

相反，我注意到，如果我对HTML autocomplete="on"元素进行不聚焦和重新聚焦（即先单击然后单击），就会显示数据列表。因此，如果与此问题仍然相关的任何人都可以使用jQuery，那么也可能值得尝试jQuery.attr()和jQuery.Blur()；这是我尚未看到的解决方案（在Firefox 80.0 64位上进行了测试）。

也就是说：

input

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

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动态加载的数据列表选项

3 个答案: