Блог

Главная - Вопросы по программированию - Объедините несколько списков вместе и сделайте из них предложения для панели поиска

Объедините несколько списков вместе и сделайте из них предложения для панели поиска

#javascript

#javascript

Вопрос:

Я хочу объединить несколько списков вместе, а затем использовать их в качестве предложений для поля ввода. У меня есть решение для одного списка, но я не могу заставить его работать с несколькими списками. Я получаю список узлов и преобразую его в массив элементов HTMLUList. Я думаю, мне нужен один большой HTMLUlist ?! Спасибо за помощь, надеюсь, вы понимаете мою проблему.

  let filter = this.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');
  

  for (i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
  // This works for one list "myUL"
  //-------------------------------------------------
  //This does not work 
  
  let filter = this.value.toUpperCase();
  ul = document.querySelectorAll (" #myUL , #myUL2 , #myUL3, #myUL4 , #myUL5 , #myUL6 ");
  var inputList = Array.prototype.slice.call(ul);
  li = inputList.getElementsByTagName('li');

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

1. гм, можете ли вы привести пример входных данных и ожидаемых результатов.. потому что я не полностью понимаю ваше объяснение

2. например, что вы подразумеваете под «списками слияния», а для «предложений» вы можете изменить placeholder аспект элемента html, чтобы он отображал тень чего угодно

3. Ehm во втором примере у меня есть список HTMLULists, поэтому он выдает ошибку «Uncaught TypeError: InputList.getElementsByTagName не является функцией». Мне нужно сделать один большой HTMLUlist из массива ?! Как бы я этого добился?

4. Это работает, если я напишу это так: «li = InputList[0].getElementsByTagName(‘li’); » Но опять же, требуется только один из 6 списков.

5. querySelectorAll дает мне одну большую коллекцию HTML, я думаю. Но если я все правильно понял, мне нужен один большой HTMUlist.

Ответ №1:

Хотя ваш подход кажется мне не очень эффективным, вы можете добиться этого, перебрав элементы ul:

 let filter = this.value.toUpperCase();
let uls = document.querySelectorAll('#myUL, #myUL2 ,#myUL3, #myUL4, #myUL5, #myUL6');
uls.forEach(ul => {
   let li = ul.getElementsByTagName('li'); 
   // continue as above
})

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

1. Спасибо! Я уже думал, что мне нужно как-то зациклить это. Как вы думаете, что было бы более эффективным?