Question

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

问题：该解决方案仅允许搜索option innerHTML。即使datalist option value=默认情况下也可以同时搜索datalist。

例如（请参见下面的示例），如果我键入输入California，则datalist不会返回California结果，但是如果我输入CA或{{ 1}}，然后CA-US返回预期的datalist结果。

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

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();
    }
});

Answer 1

只需使用(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>

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

1 个答案: