I have html page containing 70 or so divs, all with the same name, but each has different content within it. I am trying to make them searchable by filtering the content using jquery. I have it working already somewhat, you can see the page here:
<http://smokefreehousingak.org/find-housing.html>

The trouble I'm having is combining both the input from text, and the selects you see underneath the search bar. Right now the divs are filtered, but only per item, that is you cannot put a string in the text input, then change the value of the selects, and have it filter the divs based on all 3 or 4 pieces of data. It will only filter based on whichever input or select was last acted upon.

The jquery/javascript for the input filtering is thus:

```
function searchPage(searchQuery) {
    $('.secondary-container').hide();
    var searchQuery = $('#search-criteria').val();
    console.log("search query is");
    console.log(searchQuery);
    $('.secondary-container').each(function(){
       if($(this).text().toUpperCase().indexOf(searchQuery.toUpperCase()) != -1){
           $(this).fadeIn(450);
       }
    });
   console.log("page searched");
}
$('#search').click(function(){
    searchPage();
});
$("#searchbox").submit(function() {
    searchPage();
    return false;
});

```

The HTML for each item being filtered is like so (just with different info in each one):

```
<div class="main-container secondary-container">
    <aside id="filler-aside">

    </aside>
    <div class="main-content full listing">
        <div class="main-content listing-picture" style="background: url('img/maps/image70.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div>
        <div class="main-content listing-data">
        <h3>"Retirement Community of Fairbanks Inc."</h3>
            <h3>Raven Landing</h3>
            <p><span>Address:</span> 1222 Cowles St.<br>
                <span>City:</span> Fairbanks<br>
                <span>Zip:</span> 99701<br>
                <span>Type of Housing:</span> Senior <br>
                <span>Classification:</span> * Smoking is not allowed anywhere inside a building or complex</p>
            </div>
        </div>
    </div>

```

The jquery/javascript for filtering divs based on one a select is like so (this is the code for the city select):

```
function citySelect() {
    $('.secondary-container').hide();
    $("#city-select").bind("change", function() {
        console.log("city changed to");
        city = $("#city-select option:selected").text();
        console.log(city);
        // searchPage(city);
        $('.secondary-container').each(function(){
       if($(this).text().toUpperCase().indexOf(city.toUpperCase()) != -1){

           $(this).fadeIn(450);
           console.log("text");
       }
    });
    });

```

Right now I have each select with its own function thats called after its acted on, that then filters the divs based on the data selected. I think what I need is just one function that gets called anytime a select or input is acted upon, that will filter the divs based on all inputs or selects instead of statically choosing just one piece of data to work with.

Currently, the input search filter works by seeing if any div contains the text inputed into the field:

```
$('.secondary-container').each(function(){
       if($(this).text().toUpperCase().indexOf(searchQuery.toUpperCase()) != -1){
           $(this).fadeIn(450);
       }
    });

```

I need to somehow say if it includes searchQuery AND input data, etc... same thing when the inputs, I need basically this whole search function to act on all the data input not just one piece. Any suggestions?