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

出于不同的原因，我想摆脱Jquery UI自动完成功能，并将其替换为具有动态加载选项字段的HTML5数据列表。我搜索了这个主题好几天，在stackoverflow上也发现了不同的答案，比如如何使用JavaScript刷新HTML5数据列表？我认为这与我搜索的内容非常接近。

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

现在进入流程：

键入：应用

服务器响应：

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

显示的数据列表建议：

apple
pinapple
snapper

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

键入：，在

服务器响应：

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

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

但：

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

apple, i

然后火狐显示为选项：

apple, intest
apple, instructor
apple, insula

我知道与值或内部HTML字段有比较，所以我使用：

<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 选择中。在这种情况下，数据列表也无法按预期工作，但由选择触发的下拉菜单工作正常并快速刷新。

所以，最后：

我怎样才能实现在键入字母时打开数据列表选项而不会点击退格键？

提前谢谢你！

我偶然发现了这篇文章，它准确地描述了我面临的问题，并惊讶地发现没有答案。需要设置自动完成属性。在您的情况下

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

请注意属性中的大写字母 C。

根据这篇文章，问题出在 React 中使用驼峰大小写属性。我没有使用 React，但它仍然对我有用。

我还有一个问题，即必须通过jQuery使用Ajax填充HTML数据列表，尽管在Edge和Chrome上工作，但如果不在Firefox上点击退格键，这些元素就不会显示。Shrestha Ghosh发布的解决方法对我不起作用，这里发布的另一个解决方法也不起作用，它建议设置autocomplete="off"然后立即使用JavaScript/jQuery(即分别使用Element.SetAttribute((或jQuery.attr(((回到autocomplete="on"。

相反，我注意到如果我取消聚焦并重新聚焦(即单击然后单击(HTMLinput元素，则会显示数据列表。因此，如果此问题仍然相关的任何人都可以使用 jQuery，那么可能值得尝试 jQuery.Blur(( 和 jQuery.Focus(( ;这是我尚未看到的解决方案(在Firefox 80.0 64位上测试(。

那是：

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

注意keypress而不是keydown; 这样可以避免在尝试使用向下箭头键向下导航列表时触发模糊和焦点。这不是一个非常优雅的解决方案，但对于我的用例来说，它运行良好。

我在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 -->

谢谢

相关内容

最新更新

热门标签：