Javascript 如何在不丢失选项的情况下限制数据列表选项”；值=”；功能？

在这里使用@Olli的独特解决方案，我能够限制

数据列表提供的建议数量

问题：该解决方案只允许搜索
选项innerHTML
。它不允许同时搜索
datalist选项值=
，即使默认情况下
datalist
能够这样做

例如（参见下面的示例），如果我键入input
California
，
datalist
不返回
California
结果，但如果我输入
CA
或
CA-US
，则
datalist
返回预期的
California
结果

为了包含
选项innerHTML
功能，我需要对Javscript代码进行哪些更改


var search=document.querySelector（'#search'）；
var results=document.querySelector（“#searchresults”）；
var templateContent=document.querySelector（“#resultstemplate”）.content；
search.addEventListener（'keyup'，函数处理程序（事件）{
while（results.child.length）results.removeChild（results.firstChild）；
var inputVal=newregexp（search.value.trim（），'i'）；
var clonedpoptions=templateContent.cloneNode（true）；
var set=Array.prototype.reduce.call（clonedpoptions.children，函数searchFilter（frag，el）{
if（输入测试（el.textContent）和&frag.children.length<5）frag.appendChild（el）；
返回碎片；
}，document.createDocumentFragment（））；
结果：儿童（组）；
});
var n=document.getElementById（“搜索”）；
n、 addEventListener（“键控”，函数（事件）{
event.preventDefault（）；
如果（event.keyCode===13）{
document.getElementById（“myButton”）。单击（）；
}
});

美国铝业
CA-US
密苏里州
TX-US
WI-US
提交
只需使用
（inputVal.test（el.textContent）| inputVal.test（el.value）
代替
inputVal.test（el.textContent）
即可得到所需的结果。在这里，我们搜索
value
和
innerHTML
，如果其中任何一个匹配输入文本，则接受：）

更新：即使用户从中选择了一个项目，这也会导致下拉列表粘在那里，因为即使选择了一个项目，输入框的值也会与例如加州的下拉列表值匹配。
California
将与加州的下拉列表值匹配，并在下拉列表中显示

为了解决这个问题，我们必须在if语句中添加另一个条件，
（search.value！=el.value）
，这将确保如果输入值与下拉值完全相等，则该下拉值将被忽略。签出下面更新的代码段


var search=document.querySelector（'#search'）；
var results=document.querySelector（“#searchresults”）；
var templateContent=document.querySelector（“#resultstemplate”）.content；
search.addEventListener（'keyup'，函数处理程序（事件）{
while（results.child.length）results.removeChild（results.firstChild）；
var inputVal=newregexp（search.value.trim（），'i'）；
var clonedpoptions=templateContent.cloneNode（true）；
var set=Array.prototype.reduce.call（clonedpoptions.children，函数searchFilter（frag，el）{
如果（（inputVal.test（el.textContent）| | inputVal.test（el.value））&&&（search.value！=el.value）&&frag.childrence.length<5）frag.appendChild（el）；
返回碎片；
}，document.createDocumentFragment（））；
结果：儿童（组）；
});
var n=document.getElementById（“搜索”）；
n、 addEventListener（“键控”，函数（事件）{
event.preventDefault（）；
如果（event.keyCode===13）{
document.getElementById（“myButton”）。单击（）；
}
});

美国铝业
CA-US
密苏里州
TX-US
WI-US
提交
现在由于某种原因，建议下拉列表不会消失？感谢您的代码编辑。我看到了逻辑，但是由于某种原因，下拉列表被卡住了，除非我按submit，否则不会消失。我不知道你的代码会如何改变下拉行为。你说的“下拉不会消失”是什么意思？我不明白你想说什么…哦，明白了！我的错误我以前没有看到过，我已经更新了我的答案，请检查一下。。。