Поиск текста внутри 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, время: 14:59. |