Блог

Главная - Вопросы по программированию - Javascript с datalist не будет отображать все совпадающие параметры

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

#javascript #html-datalist

#javascript #html-datalist

Вопрос:

Некоторые параметры из <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) amp;amp; 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:

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

Комментарии:

1. Как бы вы сделали выпадающий список исчезающим после ввода или щелчка мыши? Он остается после выбора.