Как сгенерировать HTML из элементов массива?

Измените resultsArray на массив объектов со всей информацией, необходимой для создания результирующего HTML.

var resultsArray = [
{string: "Walt Disney", url: "walt-disney.html", img: "walt-disney.png", alt: "walt disney" },
{string: "Which color do you like?", url: "which-color.html", img: "which-color.png", alt: "which color" },
...
];


if (searchTerm != "") {
    resultsArray.forEach(({string, url, img, alt} => {
        // if the array item starts with the search value AND the input box is not empty
        if (string.toLowerCase().startsWith(searchTerm)) {

            var li = document.createElement('li'); // create an li item
            li.innerHTML = `<div class = "item"><a href = "${url}"><img src = "images/${img}" alt = "${alt}" border = "0" /></a>${string}</div>`
            resultList.append(li); // add new li item to resultList ul
        }
    }
}

Решение для фильтрации массива элементов документа состоит в том, чтобы посмотреть на их свойство innerHTML, которое является string, которое мы можем использовать для фильтрации на основе поискового запроса.

Вот рабочее решение:

Заметки:

• Для простоты я создал элементы input resultsArray в теле, а затем взял их в свой скрипт с помощью querySelectorAll(), а затем проанализировал их в Array с помощью Array.prototype.slice().
• В функции фильтра я смотрю на свойство innerHTML этого массива списка входных элементов, чтобы найти совпадения.

var searchBox = document.querySelector("input");
var resultList = document.getElementById("resultList");
// Get the results nodes list
var resultsNodeList = document.querySelectorAll('#array-list>div');
// Parse the node list into an array list
var resultsArray = [].slice.call(resultsNodeList);


searchBox.addEventListener('keyup', function() {
  var searchTerm = searchBox.value.toLowerCase();

  // reset ul by removing all li items
  while (resultList.hasChildNodes()) {
    resultList.removeChild(resultList.lastChild);
  }

  // loop through array of sentences
  for (var i = 0; i < resultsArray.length; i++) { 
    // if the array item starts with the search value AND the input box is not empty
    if (searchTerm != "" && resultsArray[i].innerHTML.toLowerCase().indexOf(searchTerm) > -1) {
      var li = document.createElement('li'); // create an li item
      li.appendChild(resultsArray[i]); // add the sentence to the new li item
      resultList.append(li); // add new li item to resultList ul
    }
  }

  // if resultList is empty after going through loop display 'no results found'
  if (!resultList.hasChildNodes() && searchTerm != "") {
    var li = document.createElement('li');
    li.innerHTML = "no results found";
    resultList.append(li);
  }
});

#array-list{
 display: none; 
}
#resultList{
  list-style-type: none;
  -webkit-padding-start: 20px;
}

<div id = "array-list">
  <div class = "item"><a href = "walt-disney.html"><img src = "images/walt-disney.png" alt = "walt disney" border = "0" /></a>walt disney</div>
  <div class = "item"><a href = "which-color.html"><img src = "images/color.png" alt = "which color" border = "0" /></a>which color</div>
  <div class = "item"><a href = "where.html"><img src = "images/where.png" alt = "where are we" border = "0" /></a>where are we</div>
  <div class = "item"><a href = "best-wells.html"><img src = "images/best-wells.png" alt = "best wells" border = "0" /></a>best wells</div>
</div>

<input type = "text" placeholder = "Type something to search">
<br><br>
<span>Suggestions:</span>
<ul id = "resultList">

</ul>

Прекратите создавать, добавлять и удалять HTMLElement, это хлопотно

Чтобы избежать множества петель for и использовать document.createElement, .appendChild и .removeChild. Я бы посоветовал использовать .innerHTML. Наряду с этим нет необходимости переписывать список элементов в resultArray как объект, просто измените строки, чтобы они соответствовали требованиям каждого атрибута, например:

Код JavaScript:

const searchBox = document.querySelector("input");
const resultList = document.getElementById("resultList");
const resultsArray = [
  "Walt Disney",
  "Which color do you like?",
  "Where are we?",
  "Which wells are the best?",
  "Who's on first?",
  "Cowboys wear white",
  "Wells are awesome!",
  "Whoooppppeeeeee",
  "Which Witch is Which",
  "What's going on?",
  "Well look at that!"
]

String.prototype.removePunctuation = function() {
  return this.replace(/['"`,!?:;.]/g, '')
}

String.prototype.toSnakeCase = function() {
  return this.split(' ').join('-').removePunctuation().toLowerCase()
}

searchBox.addEventListener('keyup', function() {
  const searchTerm = searchBox.value.toLowerCase().trim()
  resultList.innerHTML = ''

  if (searchTerm) {
    const renderedHTML = resultsArray
      .filter(result => result.toLowerCase().indexOf(searchTerm) !== -1)
      .map(result => `
        <div class='item'>
          <a href='${result.toSnakeCase()}.html'>
            <img src='images/${result.toSnakeCase()}.png' alt='${result.removePunctuation()}' border='0'/>
          </a>
        </div>
      `)

    resultList.innerHTML = renderedHTML.length > 0 ? renderedHTML.join('') : 'No results found'
  }
})

HTML-код:

<input type='text' />
<ul id='resultList'>
</ul>

Вот изменения, которые я внес в ваш код:

• Удалите все элементы в <ul> с помощью .innerHTML = ''
• .trim() пробел перед поиском.
• Итерации по resultsArray с .filter
  • Это позволяет нам определить, должен ли отображаться элемент, сохраняя при этом все в массиве.
• Затем мы можем использовать .map для генерации HTML.
  • Как это работает? Мы используем строки шаблона для вставки значений в строку, которая будет вставлена ​​в .innerHTML.

Вы также заметили, что я создал String.prototype.removePunctuation и String.prototype.toSnakeCase. Хотя я не всегда предлагаю модифицировать String.prototype, на мой взгляд, он делает этот код значительно более читаемым. Преобразовать это в обычные функции несложно.

Не думаете, что это работает? Протестируйте рабочую версию здесь, на JSFiddle

К вашему сведению, в вашем вопросе вы просите div с a, который содержит img. Единственный отображаемый текст - это атрибут alt='...', поэтому, если вы хотите отобразить текст resultsArray, вы должны просто использовать интерполяцию строк: ${result}