Скрыть Div в зависимости от пользовательского ввода

Question

Существует 1 текстовое поле ввода пользователя и массив изнутри.

Когда пользователь вводит «га», все, что не содержит «га», должно скрываться.

всякий раз, когда ввод запускается, функция вызывается для скрытия и отображения. Я не могу получить текст ввода, чтобы выбрать текст, содержащий их.

jQuery(function($) { 
 
    $(".filter").change(function() { 
 
    display_function(); 
 
    }); 
 
    $('input').on('input', function() { 
 
    display_function(); 
 
    }); 
 

 
    function display_function() { 
 
    var input = $('input').val(); 
 
    $(".wrap").each(function() { 
 
     if ($(this).hasClass($("option:selected").val())) { 
 
     if (1) { 
 
      console.log($(this).children(".name").is(":contains('" + input + "')")); 
 
      $(this).show(); 
 
     } else { 
 
      $(this).hide(); 
 
     } 
 
     } else { 
 
     $(this).hide(); 
 
     } 
 

 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type=text> 
 
<select class="filter"> 
 
    <option value="0">Select..</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<div class="wrap 0 1"> 
 
    <h1 class="name">ha</h1> 
 
</div> 
 
<div class="wrap 0 2"> 
 
    <h1 class="name">hahaha</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">zxza</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">zzss</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">aasss</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">hahaa</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">hahaha</h1> 
 
</div> 
 
<div class="wrap 0 3"> 
 
    <h1 class="name">haa</h1> 
 
</div> 
 
<div class="wrap 0 2"> 
 
    <h1 class="name">ahhh</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">sss</h1> 
 
</div>

Answer 1

Если я понимаю, что вам нужно что-то вроде этого:

jQuery(function($) { 
 
    $(".filter").change(function() { 
 
    display_function(); 
 
    }); 
 
    $('input').on('input', function() { 
 
    display_function(); 
 
    }); 
 

 
    function display_function() { 
 
    var input = $('input').val(); 
 
    $(".wrap").each(function() { 
 
     var myvalue = $(this).find("h1").html(); 
 
     if ($(this).hasClass($("option:selected").val())) { 
 
     if (new RegExp(input).test(myvalue)) { 
 
      console.log($(this).children(".name").is(":contains('" + input + "')")); 
 
      $(this).show(); 
 
     } else { 
 
      $(this).hide(); 
 
     } 
 
     } else { 
 
     $(this).hide(); 
 
     } 
 

 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type=text> 
 
<select class="filter"> 
 
    <option value="0">Select..</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<div class="wrap 0 1"> 
 
    <h1 class="name">ha</h1> 
 
</div> 
 
<div class="wrap 0 2"> 
 
    <h1 class="name">hahaha</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">zxza</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">zzss</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">aasss</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">hahaa</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">hahaha</h1> 
 
</div> 
 
<div class="wrap 0 3"> 
 
    <h1 class="name">haa</h1> 
 
</div> 
 
<div class="wrap 0 2"> 
 
    <h1 class="name">ahhh</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">sss</h1> 
 
</div>

Answer 2

Я чувствую, что вы, возможно, получили поймали в бурьяне за то, что, как представляется, быть относительно простой задачей в ванильном JavaScript.

Помните, что jQuery - это JavaScript, поэтому в вашем коде может быть использовано что-либо из переработанного кода. Часть, на которую я хочу обратить внимание, проверяет входной текст внутри элемента с помощью .innerHTML.indexOf().

(function() { 
 
    attachEvent(document.querySelector(".filter"), "change", filterByInput); 
 
    attachEvent(document.querySelector("input"), "keyup", filterByInput); 
 

 
    var wraps = document.querySelectorAll(".wrap"); 
 

 
    function filterByInput() { 
 
    var input = this.value; 
 
    for (var i = 0; i < wraps.length; i++) { 
 
     if (wraps[i].querySelector(".name").innerHTML.indexOf(input) < 0 && wraps[i].className.indexOf(input) < 0) { 
 
     wraps[i].style.display = "none"; 
 
     } else { 
 
     wraps[i].style.display = ""; 
 
     } 
 
    } 
 
    } 
 

 
    function attachEvent(element, event, handler) { 
 
    if (element.addEventListener) { 
 
     element.addEventListener(event, handler); 
 
    } else { 
 
     element.attachEvent("on" + event, handler); // for old versions of IE 
 
    } 
 
    } 
 
})();

<input type=text> 
 
<select class="filter"> 
 
    <option value="0">Select..</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<div class="wrap 0 1"> 
 
    <h1 class="name">ha</h1> 
 
</div> 
 
<div class="wrap 0 2"> 
 
    <h1 class="name">hahaha</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">zxza</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">zzss</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">aasss</h1> 
 
</div> 
 
<div class="wrap 0 4"> 
 
    <h1 class="name">hahaa</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">hahaha</h1> 
 
</div> 
 
<div class="wrap 0 3"> 
 
    <h1 class="name">haa</h1> 
 
</div> 
 
<div class="wrap 0 2"> 
 
    <h1 class="name">ahhh</h1> 
 
</div> 
 
<div class="wrap 0 1"> 
 
    <h1 class="name">sss</h1> 
 
</div>