如何在不丢失选项 "value=" 功能的情况下限制数据列表选项？

Question

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

问题：该解决方案只允许搜索 option innerHTML。它不允许同时搜索 datalist option value=，即使 datalist 默认情况下可以这样做。

例如（参见下面的示例），如果我输入 California，datalist 不会 return California 结果，但是如果我输入 CA 或 CA-US 然后 datalist return 是预期的 California 结果。

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

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>

Answer 1

只需使用 (inputVal.test(el.textContent) || inputVal.test(el.value) 代替 inputVal.test(el.textContent) 即可获得所需的结果。在这里，我们同时搜索 value 和 innerHTML，如果其中任何一个与输入文本匹配，则接受它:)

更新： 即使用户从中选择一个项目，这也会导致下拉菜单停留在那里，这是因为即使选择了一个项目，输入框的值也与下拉菜单相匹配前值。 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>

如何在不丢失选项 "value=" 功能的情况下限制数据列表选项？

How to limit datalist options without losing options "value=" functionality?

html

javascript

html-datalist