[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
<input type="text" />
Я бы хотел получить:

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>