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

问题描述 投票:1回答:1

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

我希望datalist选择标签,它将在输入字段中以逗号分隔。问题是数据列表仅针对第一个标记正确显示。在键入“字母”期间未显示第二个的建议。

现在到过程:

打字:app

服务器响应:

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

显示的数据主义建议:

apple
pinapple
snapper

我现在选择:apple,写入输入字段,然后:

打字:,在

服务器响应:

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

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. 在datalist上使用JQuery show()
  4. 将选项嵌入HTML-select。在这种情况下,datalist也没有按预期工作,但select选择的下拉菜单可以正常工作并快速刷新。

所以,最后:

如何在不按退格键的情况下键入字母时打开datalist选项?

先感谢您!

javascript jquery ajax html5 datalist
1个回答
2
投票

我偶然发现了这篇文章,它正好描述了我面临的问题,并且惊讶地发现没有答案。需要设置autocomplete属性。在你的情况下

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

注意属性中的大写字母C.

根据this帖子,问题在于React,它使用了驼峰式属性。我没有使用React,但它对我有用。

© www.soinside.com 2019 - 2024. All rights reserved.