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()时将移动节点。因此，原始列表的长度减小了。在追加之前克隆节点可解决此问题。

带有数据列表的Javascript不会显示所有匹配的选项

1 个答案: