Блог

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

Ввод объектов поиска в реальном времени на ванильном JS

#javascript #html

#javascript #HTML

Вопрос:

Чтобы получить объекты в этом списке, эта функция фильтрует имена и категории из массива объектов, проблема здесь в том, что когда я набираю, например: «jamm» (более одного «m»), я получаю пустой массив, даже если введенные слова являются правильными. Моя цель — подобрать правильные слова независимо от того, сколько. Я думаю, что обычное выражение могло бы решить эту проблему. Заранее спасибо

 var fromDB = [
    {id: 1, name: 'Almendras', category: 'Frutos secos', price: 25, amount: 0, description: 'asd'},
    {id: 2, name: 'Nueces', category: 'Frutos secos', price: 10, amount: 0, description: 'asd'},
    {id: 3, name: 'Mermelada', category: 'Jam', price: 15, amount: 0, description: 'asd'},
    {id: 4, name: 'Alfajor', category: 'Sweet', price: 20, amount: 0, description: 'asd'},
    {id: 5, name: 'Queso', category: 'UwU', price: 45, amount: 0, description: 'asd'},
    {id: 6, name: 'Arandanos', category: 'Fruta', price: 50, amount: 0, description: 'asd'},
    {id: 7, name: 'Maracuya', category: 'Fruta', price: 50, amount: 0, description: 'asd'},
    {id: 8, name: 'Chocolate', category: 'Sweet', price: 50, amount: 0, description: 'asd'},
    {id: 9, name: 'Mascarpone', category: 'UwU', price: 50, amount: 0, description: 'asd'}
];

const input = document.querySelector('input');
input.addEventListener('input', updateValue);

function updateValue(e) {
  realTimeInputValue = e.target.value.toLowerCase();
  let productsMatch = fromDB.filter(x => x.name.toLowerCase().includes(realTimeInputValue))

  if(productsMatch.length){
    console.log(productsMatch)
  } else {
    let categoriesMatch = fromDB.filter(x => x.category.toLowerCase().includes(realTimeInputValue))
    console.log(categoriesMatch);
  }
}  
 <input type="text" placeholder="Search product..."/>

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

1. Чему должен соответствовать «jamm»?

2. Должны соответствовать продуктам с категорией: «Джем»

3. «jamm» не соответствует ни одному из ваших названий элементов или категорий. Разве в этом случае массив не должен быть пустым?

4. Если вы имеете в виду, что хотите сопоставить, даже если поисковый запрос «написан с ошибкой», тогда вы можете захотеть изучить что-то вроде алгоритма расстояния Левенштейна.

5. Если вы хотите сопоставить что-то, что «близко» к тому, что у вас есть в вашей базе данных, но не точное совпадение, вам придется реализовать какой-то нечеткий алгоритм поиска. Или используйте библиотеку, которая это реализует. Или используйте что-то родное в вашей базе данных для соответствия (например, в mysql есть что-то, что называется «полнотекстовый поиск»).