javascript - 带有 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”都必须显示。

标签： javascripthtml-datalist

Answer 1

在 item 上使用 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()被调用时被移动。因此，减少了原始列表的长度。在追加之前克隆节点可修复此问题。