Как сделать поиск нескольких div с id через textarea?

Question

[S P]

<div class="table-item" id="4">Выделить блок если id 4</div>
<div class="table-item" id="5">Не выделять блок</div>
<textarea id="search" type="number" value=""></textarea>

$('#search').on('input', function(){ // При вводе текста..
  $('.table-item.-active').removeClass('-active'); // убираем класс .-active у .block.-active
  if($('.table-item[id="'+$(this).val()+'"]').length > 0) { // проверяем если такой блок с таким id, если есть..
    $('.table-item[id="'+$(this).val()+'"]') // берём блок у которого есть совпадение по id
      .addClass('-active'); // выдаём ему класс .-active
   }
});

Comments

[Сергей Соколов]

как вы хотите обрабатывать id? Если в поле "1" – выделять все, где в id есть 1: 1, 10, 11?
Как хотите несколько id вводить: через пробел, запятую ?

[S P]

Сергей Соколов, в идеале вот так -
1221,
1123,
23123,

[S P]

А если пример все выделены то добавить класс например All-check

Answer 1

[Сергей Соколов]

Вот для старта:
дальше сами.

id через пробел или запятую.

$('#search').on('input', function(){ // При вводе текста..
  $('.table-item.-active').removeClass('-active'); // убираем класс .-active у .block.-active
  const ids = $(this).val().split(/[ ,]/).filter(el => el.length);
  for (let id of ids) {
	  $(`.table-item[id="${id}"]`) // берём блок у которого есть совпадение по id
      .addClass('-active'); // выдаём ему класс .-active
  }
});

Comments

[S P]

А как сделать проверку, если у всех блоков есть класс, то показать скрыть блок?
А то через each не получается проверить

[Сергей Соколов]

Code-NaN, один вариант — держать данные отдельно от разметки, это «правильно». Создать объект, где ключи - все возможные id, а значения true или false, в зависимости от выбранности. При событии input обновлять не только наличие/отсутствие классов, но и эти true/false в объекте. В конце смотреть, все ли true:

if (!Object.values(all_ids).some(el => el === false)) {
  // у всех true
}

Другой, костыльный г-кодерский вариант это считать классы в jQuery. Взять все .table-item, проверять в цикле, есть ли класс .-active, если хоть у одного нет, можно дальше не проверять. Проверили все, у всех есть .-active, можно показать блок.