Javascript с datalist не будет отображать все соответствующие параметры - PullRequest
Новая
       17

Javascript с datalist не будет отображать все соответствующие параметры

0 голосов
/ 08 апреля 2019

Некоторые параметры из <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".

1 Ответ

1 голос
/ 08 апреля 2019

Использование 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 полностью перемещает узел.Таким образом, когда выполняется итерация сокращения, узлы перемещаются при вызове appendChild().Таким образом, длина исходного списка уменьшается.Клонирование узла перед добавлением устраняет эту проблему.

...