Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2012, 07:08
Аспирант
Отправить личное сообщение для gJam Посмотреть профиль Найти все сообщения от gJam
 
Регистрация: 21.07.2011
Сообщений: 92

Поиск текста внутри 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 вообще можно не думать..

Последний раз редактировалось gJam, 15.06.2012 в 07:10.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2012, 08:47
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

В цикле сравнивайте value input-a c innerHTML нужных div-ов, если не совпали устанавливайте им, например, display: none, а для возвращения в исходное состояние возвращайте display в исходное состояние по любому подходящему для вас событию input-a (onchange, onclick, onmouseover...), в обработчик которого и помещайте код проверки содержимого этого input-a.
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2012, 08:58
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Если нужно, чтобы поиск осуществлялся динамически по мере ввода текста, можно поместить код поиска в onkeyup input-a, здесь подойдёт и обычный input, а если input type=search, то возможно (надо поискать) при нажатии на его крестик генерируется некоторое событие, тогда можно использовать и его.
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2012, 09:26
Аспирант
Отправить личное сообщение для gJam Посмотреть профиль Найти все сообщения от gJam
 
Регистрация: 21.07.2011
Сообщений: 92

Получается, брать родительский тег, извлекать из него всех дочерние и с ними работать в вайле (так как кол-во итераций неизвестно) плюс навесить onKeyUp и кто у остальных кто "в пролёте" вешать display:none, если же поле пустое (кстати как это проверить динамически), то в цикле пробежаться по всем и вернуть display их none'а
Я правильно уловил ход мыслей?
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2012, 10:02
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от gJam
Получается, брать родительский тег, извлекать из него всех дочерние и с ними работать в вайле (так как кол-во итераций неизвестно) плюс навесить onKeyUp и кто у остальных кто "в пролёте" вешать display:none, если же поле пустое (кстати как это проверить динамически), то в цикле пробежаться по всем и вернуть display их none'а
Я правильно уловил ход мыслей?
Количество итераций определится в момент получения коллекции через её length, определить поле пустое или нет можно, например, в его onmouseover, в остальном вроде правильно поняли.
Ответить с цитированием
  #6 (permalink)  
Старый 15.06.2012, 10:02
Аспирант
Отправить личное сообщение для gJam Посмотреть профиль Найти все сообщения от gJam
 
Регистрация: 21.07.2011
Сообщений: 92

Большое спасибо за советы.
Ответить с цитированием
  #7 (permalink)  
Старый 15.06.2012, 16:19
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
fade маленького div внутри большого div kenwo0d jQuery 17 19.05.2012 15:27
Центровка текста внутри Alert Le-mark43 Events/DOM/Window 4 18.05.2012 14:03
Вертикальное выравнивание текста внутри select'а dr_gluk (X)HTML/CSS 4 16.12.2011 14:54
Скроллить до определенной строки внутри div Putnik Элементы интерфейса 1 15.08.2011 15:52
Поиск текста в блоке со скроллингом lukingnu Элементы интерфейса 0 05.08.2010 21:54