How to filter div's based on text input and select inputs together

Question

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?

Answer 1

You can do something like this:

function searchPage() {
    var search = $('#search-criteria').val().toUpperCase();
    var city = $("#city-select option:selected").text().toUpperCase();

    $('.secondary-container').each(function(){
         var text = $(this).text().toUpperCase();
         $(this).hide();
         if((!search || text.indexOf(search) !== -1) && (!city || text.indexOf(city) !== -1)) {
             $(this).fadeIn(450);
         }
     });
};

I also added !search and !city to make sure the result is shown if the string is empty.

Answer 2

Since the above ignores the selects if they are empty, but initially they have a default value of "Filter By...", I made a function that checks if the value of the select is "Filter By..." and if so, it sets the city variable to being empty, so that it will get ignored (via !search and !city), and if the value has been changed, then it executes how it normally would.

var search = $('#search-criteria').val().toUpperCase();
var city = $("#city-select option:selected").text().toUpperCase();
var cityStart = "Filter By City";

if(city.indexOf(cityStart.toUpperCase()) != -1){
        console.log("city untouched");
        console.log(cityStart);
        var city = "";
        console.log(city);
    } else {
        console.log("city not default");
    }
    $('.secondary-container').each(function(){
         var text = $(this).text().toUpperCase();
         $(this).hide();
         if((!search || text.indexOf(search) !== -1) && (!city || text.indexOf(city) !== -1)) {
             $(this).fadeIn(450);
         }
     });