Поиск текста внутри Div

[gJam]

Добрый день, дорогие форумчане!
Столкнулся с небольшой задачей на пути всего решения..
Необходимо найти нужное и скрыть лишнее..

<div id='parent'>
   <div id='child1'>
      <div class='content1'></div>
      <div class='content2'></div>
   </div>
   <div id='child2>
      <div class='content1'></div>
      <div class='content2'></div>
   </div>
...
</div>

А сверху стоит маленький инпут вида:

<input type='search'/>

Прошу помощи с направлением поиска информации по данному вопросу, или (самый лучший вариант) кодом..
По вопросу: поиск информации с помощью input'а внутри текущих дивов (child'ов | информации в их content'ах), и где найдено несовпадение (в child'ах) их исключать их показа, но при этом при пустом поле показано всё..
(пишу без стронних фреймворков)
Спасибо
P.s. child'ы генерируются с помощью php
P.s.s. об IE вообще можно не думать..

[bes]

В цикле сравнивайте value input-a c innerHTML нужных div-ов, если не совпали устанавливайте им, например, display: none, а для возвращения в исходное состояние возвращайте display в исходное состояние по любому подходящему для вас событию input-a (onchange, onclick, onmouseover...), в обработчик которого и помещайте код проверки содержимого этого input-a.

[bes]

Если нужно, чтобы поиск осуществлялся динамически по мере ввода текста, можно поместить код поиска в onkeyup input-a, здесь подойдёт и обычный input, а если input type=search, то возможно (надо поискать) при нажатии на его крестик генерируется некоторое событие, тогда можно использовать и его.

[gJam]

Получается, брать родительский тег, извлекать из него всех дочерние и с ними работать в вайле (так как кол-во итераций неизвестно) плюс навесить onKeyUp и кто у остальных кто "в пролёте" вешать display:none, если же поле пустое (кстати как это проверить динамически), то в цикле пробежаться по всем и вернуть display их none'а
Я правильно уловил ход мыслей?

[bes]

Получается, брать родительский тег, извлекать из него всех дочерние и с ними работать в вайле (так как кол-во итераций неизвестно) плюс навесить onKeyUp и кто у остальных кто "в пролёте" вешать display:none, если же поле пустое (кстати как это проверить динамически), то в цикле пробежаться по всем и вернуть display их none'а
Я правильно уловил ход мыслей?

Количество итераций определится в момент получения коллекции через её length, определить поле пустое или нет можно, например, в его onmouseover, в остальном вроде правильно поняли.

[gJam]

Большое спасибо за советы.

[bes]

<input id="inp">
<div id='parent'>
   <div>
      <div>abc</div>
      <div>a</div>
      <div>b</div>
   </div>
   <div>
      <div>c</div>
      <div>d</div>
   </div>
</div>

<script>
window.onload = function() {//onload begin
   var inp = document.getElementById('inp');

  var find = function() {//find begin
    var parent = document.getElementById('parent');
    var divs = parent.getElementsByTagName('div');
    len = divs.length;

    for (var i = 0; i < len; i++) {//for begin
      if (divs[i].childNodes.length == 1 && inp.value != divs[i].innerHTML && inp.value != '') {
        divs[i].style.display = 'none'; 
      } else if (divs[i].style.display != 'block') {
        divs[i].style.display = 'block';
      }
    }//for end
        
  }//find end

  inp.onkeyup = function() {
    find();
  }
 
}//onload end
</script>