Как можно сделать примерный поиск в списке наименований?

Question

Есть массив со списком покупок например

['огурец','помидор','сыр','хлеб','молоко']

Как можно получить из массива все значения которые слегка попдают под результаты поиска (как в поисковике гугл)?

пишу в поиске первую букву, и он мне вернул все значения которые подходят под мой запрос (например пишу букву о, вернулось слово огурец).

По идее это можно сделать с помощью метода filter но он работает только с цельными названиями

Answer 1

let data = ['огурец','огурод', 'помидор','сыр','хлеб','молоко'];

document.getElementById('test').addEventListener('input', ({target}) => {    
    let filteredData = data.filter(el => el.substring(0, target.value.length) === target.value.toLowerCase());
    console.log(filteredData.join(','));
});

<input type="text" id="test" />

Тут смотрится совпадение именно с начала слова. Если нужно искать вхождение подстроки в строку независимо от позиции, то вместо substring можно использовать includes

Answer 2

Лично мне нравится такой вариант, довольно простой и понятный:

let words = ['огурец','помидор','сыр','хлеб','молоко']

i.addEventListener('input', () => {
  console.log(words.filter(e => e.toLowerCase().includes(i.value)))
})

<input type="text" id="i">

Если сравнивать с ответом от @АлексейШиманский, то к примеру если написать o в запрос, то у меня найдётся также молоко, т.к. идёт проверка есть ли в словах написанное значение, тогда как у Алексея, идёт проверка на "начинается ли на", в поддержку его ответа, у него всё работает быстрее.

БЛОГ НА HUSL

Как можно сделать примерный поиск в списке наименований?

Ответы (2 шт):