Динамическая фильтрация видимых элементов Div - PullRequest
Новая
       5

Динамическая фильтрация видимых элементов Div

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

Я пытаюсь отобразить только те дивы, которые выбраны в флажках.Это работает нормально.Я хочу сделать так, чтобы каждый раз, когда пользователь вводил символ в поле поиска, список элементов проверялся, поэтому, если пользователь вводит «div 4» и все div проверяются, то после ввода «4» всеисчезнет, ​​за исключением подстроки, содержащей 4.

Я хочу сделать это без кнопки отправки, динамически.

Как я могу это сделать?

Пока мой кодкак это: 

<html>
  <head>
    <script type="text/javascript"> 
      <!-- 
      function dynamicSearch() {
        document.getElementById('search').value
      }

      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>

Ответы [ 2 ]

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

Вот что я только что взломал вместе. Это требует уточнения, но я думаю, что это показывает основную идею. 

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';
        }
      }
    }
  }
0 голосов
/ 25 апреля 2011

вы можете создать функцию, которая будет наблюдать за document.getElementById('search').value и связывать эту функцию с событием onkeyup, если будет искать элемент ввода.

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

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

...