2

Итак, есть массив объектов. Нужно сделать так, что бы все было как в обычном поиске: при вводе в input происходит проверка на сходство уже введенных букв и названий. Как это реализовать?

var songs = [{
    artist: {
      name: 'Imagine',
      song: 'Dragons'
    }
  },

  {
    artist: {
      name: 'Five',
      song: 'Finger'
    }
  }
];


document.getElementById('button1').onclick = function() {
  var text = document.getElementsByTagName("input")[0];
  var val = text.value;

  songs.map(function(item) {
    if (item.artist.name.includes(val)) {
      console.log('вывести все названия, в которых первые 3 буквы совпадают с введенными');
    }
  });
}
<input type="text" id="input">
<button id="button1">click</button>

3
  • Прослушиваешь у input событие onchange и в обработчике события ищешь в массиве сходства, если находишь, делаешь чего тебе нужно. 25 окт 2017 в 18:50
  • Структуру данных я бы тоже упростил, какая-то она слишком сложная здесь. 25 окт 2017 в 19:02
  • @ivan.posokhin В оригинале она выглядит немного по другому, просто здесь всю не записывал.
    – Tick-Tack
    25 окт 2017 в 19:04

1 ответ 1

0

Привет, просто прицепи addEventListener к элементу input (событие 'input' или событие 'change', в зависимости от цели). Но вообще мне кажется проверку лучше делать с RegEx. И не забудь учесть верхний/нижний регистр. Далее, вместо map я бы использовал forEach. Ну там много еще вещей можно улучшить/переделать).Смотри Fiddle.

document.getElementById('input').addEventListener('change', onChange);

function onChange() {
  var text = document.getElementsByTagName("input")[0];
  var val = text.value;

  songs.forEach(function(item) {
    if (item.artist.name.includes(val)) {
      console.log(item.artist.name);
    }
  });
}
2
  • да, все верно, событие input лучше, затупил. 25 окт 2017 в 19:24
  • задача сформулирована расплывчато. Непонятно что все таки нужно
    – Tima Tru
    25 окт 2017 в 19:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.