出于不同的原因,我想摆脱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());
}
});
}
});
我已经测试过的内容:
所以,最后:
如何在不按退格键的情况下键入字母时打开datalist选项?
先感谢您!
我偶然发现了这篇文章,它正好描述了我面临的问题,并且惊讶地发现没有答案。需要设置autocomplete属性。在你的情况下
<input autoComplete="off" list="autocompleteList" type="text" class="form-control" name="Tags" id="Tags">
注意属性中的大写字母C.
根据this帖子,问题在于React,它使用了驼峰式属性。我没有使用React,但它对我有用。