gpt4 book ai didi

javascript - 如何限制数据列表选项而不丢失选项 "value="功能?

转载 作者:行者123 更新时间:2023-12-03 01:32:29 25 4
gpt4 key购买 nike

使用 @Olli 的独特解决方案 Limit total entries displayed by datalist我可以限制 datalist 提供的建议数量。

问题:该解决方案仅允许搜索选项innerHTML。它不允许同时搜索 datalist option value=,尽管 datalist 默认情况下能够执行此操作。

例如(参见下面的示例),如果我输入 Californiadatalist 不会返回 California 结果,但如果我输入 CACA-US,然后 datalist 返回预期的 California 结果。

我需要对 Javscript 代码进行哪些更改才能包含 option insideHTML 功能?

var search = document.querySelector('#search');
var results = document.querySelector('#searchresults');
var templateContent = document.querySelector('#resultstemplate').content;
search.addEventListener('keyup', function handler(event) {
while (results.children.length) results.removeChild(results.firstChild);
var inputVal = new RegExp(search.value.trim(), 'i');
var clonedOptions = templateContent.cloneNode(true);
var set = Array.prototype.reduce.call(clonedOptions.children, function searchFilter(frag, el) {
if (inputVal.test(el.textContent) && frag.children.length < 5) frag.appendChild(el);
return frag;
}, document.createDocumentFragment());
results.appendChild(set);
});

var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("myButton").click();
}
});
<template id="resultstemplate">
<option value="Alabama">AL-US</option>
<option value="California">CA-US</option>
<option value="Michigan">MI-US</option>
<option value="Texas">TX-US</option>
<option value="Wisconsin">WI-US</option>
</template>
<input type="text" name="search" id="search" placeholder="type state name or code" list="searchresults" autocomplete="off" />
<datalist id="searchresults"></datalist>

<button id="myButton" type="button"
onclick="loadDoc('state_data.xml', myFunction)">Submit
</button>

最佳答案

只需使用 (inputVal.test(el.textContent) || inputVal.test(el.value) 代替 inputVal.test(el.textContent) 即可给您想要的结果。在这里,我们搜索 value 以及 innerHTML,如果其中任何一个与输入文本匹配,则接受它:)

更新:即使用户从中选择一个项目,这也会导致下拉列表停留在那里,因为即使在选择一个项目之后,输入框的值也与 ex 的下拉列表值匹配。 California 将与 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', function handler(event) {
while (results.children.length) results.removeChild(results.firstChild);
var inputVal = new RegExp(search.value.trim(), 'i');
var clonedOptions = templateContent.cloneNode(true);
var set = Array.prototype.reduce.call(clonedOptions.children, function searchFilter(frag, el) {
if ((inputVal.test(el.textContent) || inputVal.test(el.value)) && (search.value != el.value) && frag.children.length < 5) frag.appendChild(el);
return frag;
}, document.createDocumentFragment());
results.appendChild(set);
});

var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("myButton").click();
}
});
<template id="resultstemplate">
<option value="Alabama">AL-US</option>
<option value="California">CA-US</option>
<option value="Michigan">MI-US</option>
<option value="Texas">TX-US</option>
<option value="Wisconsin">WI-US</option>
</template>
<input type="text" name="search" id="search" placeholder="type state name or code" list="searchresults" autocomplete="off" />
<datalist id="searchresults"></datalist>

<button id="myButton" type="button"
onclick="loadDoc('state_data.xml', myFunction)">Submit
</button>

关于javascript - 如何限制数据列表选项而不丢失选项 "value="功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51226587/

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