Javascript поиск подстроки - PullRequest
Новая
       1

Javascript поиск подстроки

1 голос
/ 29 апреля 2011

Извинения, так как это репост потока, к которому я больше не могу получить доступ или комментировать.

Я пытаюсь написать функцию javascript, которая будет искать все указанные элементы div на html-странице для поиска подстрокисодержится в моей панели поиска.Как я могу сделать это просто?

Вот мой код на данный момент, у меня он работает так, что метод showMe будет отображать только выбранные div, мне просто нужен код подстроки для работы сейчас.Может ли кто-нибудь помочь, пожалуйста? 

   <html>

<head>
<script type="text/javascript"> 
function dynamicSearch() {
    var val = document.getElementById('search').value;
    if (val == '')
      val = '-1';
    var srch = new RegExp(val, "gi");
    var els = document.getElementsByClassName('row');
    for (var idx in els) {
      if (idx != parseInt(idx))
        continue;
      var el = els[idx];
      if (typeof(el.innerHTML) !== 'undefined') {
        console.log(el.innerHTML);
        if (srch.test(el.innerHTML)) {
          el.style.display = 'block';
        } else {
          el.style.display = 'none';
        }
      }
    }
  }

function showMe (it, box) { 
var vis = (box.checked) ? "block" : "none"; 
document.getElementById(it).style.display = vis;
} 

</script>
</head>

<body>

<form>
<label for="search">Search:</label>
            <input type="text" name="search" id="search" onkeyup="dynamicSearch()"/>

<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1

<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2

<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3

<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4

<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5

<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>

</body>

</html>

Код, который я здесь, правильно работает для моих флажков, но я не могу заставить его отображать только искомую подстроку в результате (то есть функция DynamicSearch не работает, ноshowMe один делает ... или, по крайней мере, я не могу заставить работать код DynamicSearch?)

1 Ответ

0 голосов
/ 29 апреля 2011

Что не так с простым циклом? 

function doSearch() {
 var val = $('searchBox').value;
 var els = document.getElementsByClassName('theDivs')
 //OR SIMILAR, whatever you need
 //var els = document.getElementsByTagName('div')
 for (el in els) {
  if (el.innerHTML.indexOf(val) >= 0)
   el.style.display = 'block'
  else
   el.style.display = 'none'
 }
}

РЕДАКТИРОВАТЬ: См. Эту скрипку - на основе другой скрипки: http://jsfiddle.net/nLxc4/5/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...