Блог

Главная - Вопросы по программированию - Как отфильтровать массив JS на основе пользовательского ввода таким образом, чтобы пользователь писал «Brl», и он показывал Берлин (буквы не следуют одна за другой сразу)?

Как отфильтровать массив JS на основе пользовательского ввода таким образом, чтобы пользователь писал «Brl», и он показывал Берлин (буквы не следуют одна за другой сразу)?

#javascript #arrays

Вопрос:

У меня есть массив городов, var cities = ['Berlin', 'Bucharest', 'Paris', 'Munich', 'Amsterdam', 'Milan']; этот массив должен быть отфильтрован на основе поиска входных данных, передаваемых (Ф.е., пользователь вводит ‘м’, и он показывает ‘Мюнхен’, ‘Амстердам’, и ‘Милан’, затем пользователь добавляет к ‘м’ в поисках входа (пишет «Ма»), и это показывает его «Амстердам» и «Милан»», хотя эти буквы не одна сразу после другой). Более того, мне нужно, чтобы эти буквы были каким-то образом выделены, поэтому, скажем, буквы » м » и » а » в этих словах желтые.

Это то, что я делал до сих пор, но это работает не так, как мне нужно.

 var input = document.querySelector("input").value.toLowerCase().trim();
document.addEventListener('input', search)

function search() {
 var filteredArray = cities.filter(x => x.toLowerCase().includes(input));
 console.log(filteredArray);//to see what I've got
}

Ценю любую помощь! Я новичок в JavaScript. Спасибо!

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

1. Вы можете выполнить фильтрацию, превратив входные данные в регулярное выражение, например brl , становится /b.*r.*l/ . Выделить совпадающие буквы сложнее.

2. Вы забыли передать входное значение в функцию поиска.

3. Это логика, а не JavaScript. В принципе, вам нужно input разбить его на буквы, а затем выяснить, все ли эти буквы находятся в каждом из городов.

4. @HereticMonkey Они также должны быть в правильном порядке.

5. Это упражнение или вы просто хотите, чтобы оно сработало? Если последнее, вы можете посмотреть fuse.js на нечеткий поиск

Ответ №1:

Вы можете фильтровать так.

 document.addEventListener('input', search);

const cities = ['Berlin', 'Bucharest', 'Paris', 'Munich', 'Amsterdam', 'Milan'];

function search(e) {
  const input = e.target.value.toLowerCase().trim();
  const filteredArray = cities.filter(x => {
    const c = x.toLowerCase();
    let m = 0;
    for (let l of input) {
      const i = c.substr(m).indexOf(l);
      if (i < m) return false;
      m = i;
    }
    return true;
 });
 console.log(filteredArray);//to see what I've got
} 
 <input>

Кроме того, вы можете запомнить индексы, чтобы выделить соответствующие буквы.

Метки: , ,