gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:12:41 25 4
gpt4 key购买 nike

出于不同的原因,我想摆脱 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 中。在这种情况下,数据列表也没有按预期工作,但由选择触发的下拉菜单工作正常并快速刷新。

所以,最后:

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

提前致谢!

最佳答案

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

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

注意属性中的大写C。

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

关于javascript - 在 Firefox 中使用 AJAX 动态加载数据列表选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53012356/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com