Поиск текста внутри Div
Добрый день, дорогие форумчане!
Столкнулся с небольшой задачей на пути всего решения.. Необходимо найти нужное и скрыть лишнее.. <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 вообще можно не думать.. |
В цикле сравнивайте value input-a c innerHTML нужных div-ов, если не совпали устанавливайте им, например, display: none, а для возвращения в исходное состояние возвращайте display в исходное состояние по любому подходящему для вас событию input-a (onchange, onclick, onmouseover...), в обработчик которого и помещайте код проверки содержимого этого input-a.
|
Если нужно, чтобы поиск осуществлялся динамически по мере ввода текста, можно поместить код поиска в onkeyup input-a, здесь подойдёт и обычный input, а если input type=search, то возможно (надо поискать) при нажатии на его крестик генерируется некоторое событие, тогда можно использовать и его.
|
Получается, брать родительский тег, извлекать из него всех дочерние и с ними работать в вайле (так как кол-во итераций неизвестно) плюс навесить onKeyUp и кто у остальных кто "в пролёте" вешать display:none, если же поле пустое (кстати как это проверить динамически), то в цикле пробежаться по всем и вернуть display их none'а
Я правильно уловил ход мыслей? |
Цитата:
|
Большое спасибо за советы.
|
<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> |
Часовой пояс GMT +3, время: 17:18. |