Форум

runyugin · #1 (**permalink**) 31.01.2016, 20:24

есть конструкция:

<input type="text" >

  <div class="accordion">

      <section class="accordion_item">
          <div class="title_block">
             заоловок
           </div>
           <div class="infos">
             ....
           </div>
        </section>

      <section class="accordion_item">
          <div class="title_block">
             заоловок
           </div>
           <div class="infos">
             ....
           </div>
        </section>


      <section class="accordion_item">
          <div class="title_block">
             заоловок
           </div>
           <div class="infos">
             ....
           </div>
        </section>

и т.д.

</div>

нужен срипт выполняющий проверку при печатании текста в input сравнивающий текст с заголовками title_block и input , там где нет совпадений скрывать весь section

рони · #2 (**permalink**) 31.01.2016, 20:35

runyugin,
а где ваши попытки?

DynkanMaclaud · #3 (**permalink**) 01.02.2016, 11:32

runyugin,
а Аякс зачем?

runyugin · #4 (**permalink**) 01.02.2016, 16:20

рони · #5 (**permalink**) 01.02.2016, 18:52

Сообщение от runyugin

где нет совпадений скрывать весь section

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
  $(function() {
    var $itemAcc = $(".accordion_item");
    $("input").on("input", function() {
        var val = this.value;
        $itemAcc.show().filter(function() {
            var text = $(".title_block", this).text();
            return !~text.indexOf(val)
        }).hide()
    })
});
  </script>
</head>

<body>
<input type="text" >

  <div class="accordion">

      <section class="accordion_item">
          <div class="title_block">
             заголовок 1
           </div>
           <div class="infos">
             ....
           </div>
        </section>

      <section class="accordion_item">
          <div class="title_block">
             заголовок 2
           </div>
           <div class="infos">
             ....
           </div>
        </section>


      <section class="accordion_item">
          <div class="title_block">
             заголовок 3
           </div>
           <div class="infos">
             ....
           </div>
        </section>



</div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript