1

Итак, есть массив объектов. Нужно сделать так, что бы все было как в обычном поиске: при вводе в 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 that you have read and understand our privacy policy and code of conduct.

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