jQuery Search Form Return Div

Question

I'm trying to get this to work: http://jsfiddle.net/D5Pmy/

Basically, when someone types in a zip code, for example 18052, the DIV with the span class of 18052 will report back. Initially, I want all DIV's to remain hidden until the Submit button is clicked.

I'm really close, but when the Submit button is clicked, the div shows and then hides quickly. I'm not sure how to keep the information stay shown.

$("#integrators-list div").hide();

$("#clickme").click(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $("#filter").val(), count = 0;
    if(!filter){
       $("#integrators-list div").hide();
       return;
    }

    var regex = new RegExp(filter, "i");
    // Loop through the comment list
    $("#integrators-list div").each(function(){

       // If the list item does not contain the text phrase fade it out
       if ($("span.zip").text().search(regex) < 0) {
          $("#integrators-list div").hide();

       // Show the list item if the phrase matches and increase the count by 1
       } else {
          $("#integrators-list div").show();
          count++;
       }
    });

    // Update the count
   // var numberItems = count;
   // $("#filter-count").text("Number of Integrators = "+count);
});

Here's the HTML:

<form id="live-search" action="" class="styled" method="post"> <fieldset><input type="text" class="text-input" id="filter" value="" /><input type="submit" id="clickme" value="Submit" /></fieldset></form>

`

<div class="integrator">
    <span class="zip">18052</span>
    <h2>WEPCO Full Service Material Handling Systems Integrator</h2>
    <h3>www.wepcoinc.com</h3>
    <p>WEPCO, Inc. has over 40 years of experience with a full range of engineered solutions for high throughput, mission-critical material handling projects.</p>
    <a href="#">Contact this integrator partner &gt;</a>
</div>

`

Answer 1

I also forked your code: http://jsfiddle.net/cv63M/19/

$(document).ready(function(){
        $("#integrators-list div").hide();

    $("#clickme").click(function(){
                $("#integrators-list div").hide(); //hide all again for next search

        // Retrieve the input field text and reset the count to zero
        var filter = $("#filter").val(), count = 0;
        if(!filter){
           $("#integrators-list div").hide();
           return false;
        }

        var regex = new RegExp(filter, "i");
        // Loop through the comment list
        $("#integrators-list div").each(function(){
           //alert($(this).children("span.zip").text());

            //need to use "this" because is the current div in the loop (each)
           if ($(this).children("span.zip").text().search(regex) >= 0) {
                    $(this).show();//show div if matches with search
                       count//++; increment counter
                       return false;//finish the loop
           }
           // Show the list item if the phrase matches and increase the count by 1

        });

        // Update the count
       // var numberItems = count;
       // $("#filter-count").text("Number of Integrators = "+count);
        return false;
    });
});

Seems to work. But @Kevin Owen already show you the issues with your scripts.

The main problem in your code it's you weren't using a reference to "this", then in your loop you were working with all the divs because of your didn't specify the div or span within the div. I use a method from jQuery "children" (diff approach that the one from Kevin).

Answer 2

Hi you have a couple of issues:

you have your textbox and button inside a form tag with method=post and your button is a submit button

this means that the form will be submitted after the button is clicked - this is what is happening after your code has executed and it's causing the error you're seeing.

to get round this add "return false" which will cancel the form submission

see: http://jsfiddle.net/VhZD9/1/

$(document).ready(function(){
    $("#integrators-list .integrator").hide();

    $("#clickme").click(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $("#filter").val(), count = 0;
        if(!filter){
           $("#integrators-list .integrator").hide();
           return false;
        }

        var regex = new RegExp(filter, "i");
        // Loop through the comment list
        $("#integrators-list .integrator").each(function(){

            var $this = $(this);
           // If the list item does not contain the text phrase fade it out
           if ($("span.zip", $this).text().search(regex) < 0) {
              $this.hide();

           // Show the list item if the phrase matches and increase the count by 1
           } else {
              $this.show();
              //count++;
           }
        });
        return false;
        // Update the count
       // var numberItems = count;
       // $("#filter-count").text("Number of Integrators = "+count);
    });
});

also note that $("#integrators-list .integrator") is a better selector than $("#integrators-list div") as it's more specific

and inside $("#integrators-list .integrator").each you should set a reference to "this" and make your span.zip selector relative to the parent element you've just selected

oh and obviously it's only the current element you want to hide or show so you can call $this.hide() or $this.show()

Answer 3

Here you are hiding everything $("#integrators-list div").hide();

Here you are showing everything: $("#integrators-list div").show();

You need a different selector, perhaps:

<html><div class="integrator">
<span class="zip">18052</span>
</div></html>

if($('.zip').each(function(item, idx){
        if(item.html()==filter)item.hide();
      });

*not tested