Hide Div depending on user input

Question

There is 1 User input text box and array of with a within.

When user type "ha" all that does not contain "ha" should hide.

whenever input is triggered a function is called to hide and display. I cannot get the input text to select the text that contains them.

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>

@erkaner I was logging what the if statement is doing. replace the console.log statement. ** basically - if name contains user input** should go into that if (true). — vico
– vico, Commented May 1, 2015 at 18:10

NaN · Accepted Answer · 2015-05-01 18:13:14Z

If i understand you need something like this:

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>

Thriggle · Accepted Answer · 2015-05-01 18:49:31Z

I feel like you might have gotten caught in the weeds for what appears to be a relatively simple task in vanilla JavaScript.

Remember that jQuery is JavaScript, so anything in the reworked code below can be used in your code. The part I want to call attention to is checking for the input text inside the element using .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>

that code doesn't work as good as the above one. for example: Input "hahaha" in your text field and then change the option to 1 ... and yes every div is visible again. The one above maybe is not as "native" but is cleaner and safer
@Santiago, good point. That's because mine's looking at the value of the current input element whenever its value changes. You can also type in "3" to filter on all the things that the dropdown filters on. With that said, I believe my code is easier to decipher and debug. The logic that OP is using to filter on the drop-down selection is really shaky. For example, $("option:selected").val() will grab the selected value of any select element on the page, not necessarily the one we want to filter by.

Collectives™ on Stack Overflow

Hide Div depending on user input

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related