带有 datalist 的 Javascript 将不会显示所有匹配的选项

Question

来自<template>的一些选项没有显示在 <datalist> 。使用下面的代码，我尝试键入“ray”，但它只显示“ray AA”。当我尝试输入“ray b”时，它显示“Ray BB”。代码有问题吗。如果这个问题有任何解决方法，请告诉我。谢谢。

        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 set = Array.prototype.reduce.call(templateContent.cloneNode(true).children, function searchFilter(frag, item, i) {
                if (inputVal.test(item.textContent) && frag.children.length < 6) frag.appendChild(item);
                    return frag;
            }, document.createDocumentFragment());
            results.appendChild(set);
        });

    <template id="resultstemplate">
        <option>Ray AA</option>
        <option>Ray BB</option>
        <option>Ray1</option>
        <option>Ray2</option>
    </template>
    <input type="text" name="search" id="search"  placeholder="type 'r'" list="searchresults" autocomplete="off" />
    <datalist id="searchresults"></datalist>

    <script type="text/javascript">

</script>

当用户输入“ray”时，必须显示“Ray AA”和“Ray BB”。

Answer 1

在项目上使用cloneNode似乎有效。

        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 set = Array.prototype.reduce.call(templateContent.cloneNode(true).children, function searchFilter(frag, item, i) {
                if (inputVal.test(item.textContent) && frag.children.length < 6) frag.appendChild(item.cloneNode(true));
                    return frag;
            }, document.createDocumentFragment());
            results.appendChild(set);
        });

    <template id="resultstemplate">
        <option>Ray AA</option>
        <option>Ray BB</option>
        <option>Ray1</option>
        <option>Ray2</option>
    </template>
    <input type="text" name="search" id="search"  placeholder="type 'r'" list="searchresults" autocomplete="off" />
    <datalist id="searchresults"></datalist>

    <script type="text/javascript">

</script>

原因

appendChild 完全移动节点。因此，当进行reduce迭代时，调用appendChild()时节点会被移动。这样，原始列表的长度就减少了。在附加之前克隆节点可以修复此问题。