(我找不到它，但我也不知道如何搜索它。)
我想使用<input list=xxx>和<datalist id=xxx>来实现自动完成，但我希望浏览器使用“包含”而不是“以...开头”的方式进行匹配，因为后者似乎是标准的方式。有办法吗？
如果没有简单方法，是否可以强制显示我要显示的建议，而不是浏览器匹配的建议？假设我正在输入“foo”，我想显示选项“bar”和“baz”。我能强迫用户选择这些吗？如果我只是用JS填充数据列表，浏览器仍然会进行“以...开头”的检查，并过滤它们。
我想完全控制数据列表选项的显示方式，而不是控制其UI、灵活性、可访问性等等，所以我不想完全重新制作它。甚至不要建议使用jQuery插件。
如果我可以终极控制表单元素验证，为什么不能控制自动完成呢？
编辑：我现在看到Firefox确实使用了“包含”方式......这甚至不是一个标准吗？有什么办法可以强制这样吗？我能改变Firefox的方式吗？
编辑：我做了这个来说明我的要求：http://jsfiddle.net/rudiedirkx/r3jbfpxw/
'包含'方式
也许这就是您正在寻找的内容（您问题的第一部分）。
它遵循“以...开头”的限制，并在进行选择时发生更改。
'use strict';
function updateList(that) {
if (!that) {
return;
}
var lastValue = that.lastValue,
value = that.value,
array = [],
pos = value.indexOf('|'),
start = that.selectionStart,
end = that.selectionEnd,
options;
if (that.options) {
options = that.options;
} else {
options = Object.keys(that.list.options).map(function (option) {
return that.list.options[option].value;
});
that.options = options;
}
if (lastValue !== value) {
that.list.innerHTML = options.filter(function (a) {
return ~a.toLowerCase().indexOf(value.toLowerCase());
}).map(function (a) {
return '<option value="' + value + '|' + a + '">' + a + '</option>';
}).join();
updateInput(that);
that.lastValue = value;
}
}
function updateInput(that) {
if (!that) {
return;
}
var value = that.value,
pos = value.indexOf('|'),
start = that.selectionStart,
end = that.selectionEnd;
if (~pos) {
value = value.slice(pos + 1);
}
that.value = value;
that.setSelectionRange(start, end);
}
document.getElementsByTagName('input').browser.addEventListener('keyup', function (e) {
updateList(this);
});
document.getElementsByTagName('input').browser.addEventListener('input', function (e) {
updateInput(this);
});<input list="browsers" name="browser" id="browser" onkeyup="updateList();" oninput="updateInput();">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>编辑
展示搜索内容的不同方法，以便清晰地了解发生了什么。这也适用于Chrome浏览器。受显示数据列表标签但提交实际值启发。
'use strict';
var datalist = {
r: ['ralph', 'ronny', 'rudie'],
ru: ['rudie', 'rutte', 'rudiedirkx'],
rud: ['rudie', 'rudiedirkx'],
rudi: ['rudie'],
rudo: ['rudolf'],
foo: [
{ value: 42, text: 'The answer' },
{ value: 1337, text: 'Elite' },
{ value: 69, text: 'Dirty' },
{ value: 3.14, text: 'Pi' }
]
},
SEPARATOR = ' > ';
function updateList(that) {
var lastValue = that.lastValue,
value = that.value,
array,
key,
pos = value.indexOf('|'),
start = that.selectionStart,
end = that.selectionEnd;
if (lastValue !== value) {
if (value !== '') {
if (value in datalist) {
key = value;
} else {
Object.keys(datalist).some(function (a) {
return ~a.toLowerCase().indexOf(value.toLowerCase()) && (key = a);
});
}
}
that.list.innerHTML = key ? datalist[key].map(function (a) {
return '<option data-value="' + (a.value || a) + '">' + value + (value === key ? '' : SEPARATOR + key) + SEPARATOR + (a.text || a) + '</option>';
}).join() : '';
updateInput(that);
that.lastValue = value;
}
}
function updateInput(that) {
var value = that.value,
pos = value.lastIndexOf(SEPARATOR),
start = that.selectionStart,
end = that.selectionEnd;
if (~pos) {
value = value.slice(pos + SEPARATOR.length);
}
Object.keys(that.list.options).some(function (option) {
var o = that.list.options[option],
p = o.text.lastIndexOf(SEPARATOR);
if (o.text.slice(p + SEPARATOR.length) === value) {
value = o.getAttribute('data-value');
return true;
}
});
that.value = value;
that.setSelectionRange(start, end);
}
document.getElementsByTagName('input').xx.addEventListener('keyup', function (e) {
updateList(this);
});
document.getElementsByTagName('input').xx.addEventListener('input', function (e) {
updateInput(this);
});<input list="xxx" name="xx" id="xx">
<datalist id="xxx" type="text"></datalist>r、左箭头、e。解决方法：input.value = anyFooResetsCursor; window.setTimeout(() => this.setSelectionRange(oldStart + FooLen - oldLen, oldEnd + FooLen - oldLen), 0);。我猜超时可能会更改为onkeyup（如果更喜欢）。 - ilyaigpetrovundefined。现在两个函数都进行了检查。 - Nina Scholz尽管这个帖子已经发布了约2年，但如果您正在阅读这个帖子，可能需要检查您的浏览器是否有更新版本：
当前规范: https://html.spec.whatwg.org/multipage/forms.html#the-list-attribute
当建议列表中的选项数量较多时，鼓励用户代理过滤建议源元素所代表的建议，并仅包含最相关的建议（例如基于用户到目前为止输入的内容）。没有定义明确的阈值，但将列表限制在4至7个值是合理的。如果根据用户的输入进行过滤，则用户代理应使用子字符串匹配同时针对建议的标签和值。
而当此帖子被编写时，Firefox (51) 和 Chrome (56) 的行为已经改变以符合规范。
这意味着操作者想要的功能现在应该可以正常工作。
autocomplete 属性是另一个故事。在我看来与这个问题无关。如果你愿意，可以发表另一个答案或者提出另一个问题。 - tsh这个代码片段已经解决了你所要求的问题，但是我不确定如何在没有这个依赖项的情况下使其正常工作，因为当与Bootstrap一起使用时，UI看起来有点奇怪和不协调。
elem.autocomplete({
source: list.children().map(function() {
return $(this).text();
}).get()
autocomplete，完全没有使用原生的自动完成功能。我本来希望2016年的自动完成功能会更好一些 =( - Rudielet wrdlimit = prefix =>
{ let elm = mydatalist.firstElementChild;
while( elm )
{ if( elm.value.startsWith( prefix ))
{ elm.removeAttribute('disabled');
} else
{ elm.setAttribute('disabled', true );
}
elm = elm.nextElementSibling;
}
}
0x800a13b5 - JavaScript运行时错误：在严格模式下不允许对只读属性进行赋值。 - Nina ScholzinnerHTML方法，它有效。 - Nina Scholz