Как вывести следующую структуру из данных в html?

Question

[gsdev99]

Всем привет, подскажите, пожалуйста, как правильно решить следующую задачу?
У меня есть некий объект:

const obj = {
  people: [
    {
      id: 1,
      firstName: 'John',
      lastName: 'Smith'
    },
    {
      id: 2,
      firstName: 'Brandon',
      lastName: 'Stone'
    },
    {
      id: 3,
      firstName: 'Sandoval',
      lastName: 'Pratt'
    },
    {
      id: 4,
      firstName: 'Bradley',
      lastName: 'Keegan'
    }
  ]
};

При вводе в input? например:
bra

Я бы хотел получить:

const obj = {
  people: [
    {
      id: 2,
      firstName: 'Brandon',
      lastName: 'Stone'
    },
    {
      id: 4,
      firstName: 'Bradley',
      lastName: 'Keegan'
    }
  ]
};

Могу предположить, что подобное можно реализовать вот так (как один из вариантов)

const filterVal = document.querySelector('input').value.trim().toLowerCase().split(/\s+/);
const filterBy = ['firstName', 'lastName'];
const filtered = obj.people.filter(item => filterBy.some(prop => filterVal.some(val => item[prop].toLowerCase().includes(val))));

Если будут другие решения, буду благодарен идеям.
Итак, собственно сам вопрос:
Например, при click я получил необходимые данные
Мне необходимо вывести следующую структуру html:

<div class="autocomplete-suggestions__list">
  <div class="autocomplete-suggestion__item">
    <div>
      Keegan
      <strong>Bra</strong>
      dley
    </div>
    <div>
      <strong>Bra</strong>
      ndon Stone
    </div>
  </div>
</div>

Answer 1

[0xD34F]

document.querySelector('input').addEventListener('input', e => {
  const
    val = e.target.value,
    reg = RegExp(val, 'gi'),
    keys = [ 'firstName', 'lastName' ];

  document.querySelector('.autocomplete-suggestions__list').innerHTML = val && people
    .map(n => keys.map(k => n[k]).join(' '))
    .filter(n => (reg.lastIndex = 0, reg.test(n)))
    .map(n => `<div>${n.replace(reg, '<strong>$&</strong>')}</div>`)
    .join('');
});

Comments

[gsdev99]

Большое спасибо!