Dynamic search using jQuery, HTML and CSS

I am developing a member search function for my web app, I want a powerful search feature that can deal with multiple search parameters either one at a time (ie members who are 18-27) or more than one at a time (ie members who are 18-27 AND whose minimum rate is 20).

I want to use ranges for many of the options to allow searches between two values such as age.

I also want to use a checkbox to set specific functions - such as cleaning, DIY etc - and have those filtered as part of the results too.

The principle is that a user would make their search selections, click apply filter and the members would be filtered based on data attributes such as data-age - the values of these attributes are pulled from my database.

I have achieved this with age and thought it would be a case of simply replicating that for other fields but that has not been the case.

Age works perfectly, but the new addition of price doesn’t work at all - and I suspect even if price was working it wouldn’t be ‘chained’ with other search criteria (eg if an age range has also been entered).

I’m looking for some guidance on how I can use text fields, checkboxes, drop down selections (as ranges) and have them work together or independently.

I am using the following JavaScript;

<script type="text/javascript">
                            $("input[type='applyfilter']").click(function() {

                               $('.box').hide();
                               min_age = $("#age-min").val()
                               max_age = $("#age-max").val()
                               min_price = $("#price-min").val()
                               max_price = $("#price-max").val()

                               for (i = min_age; i <= max_age; i++){
                                 $("div[data-age=" + i + "]").show();
                               }

                               for (i = min_price; i <= max_price; i++){
                                 $("div[data-price=" + i + "]").show();
                               }

                               // Slide advanced panel up
                               $('.filter-panel').collapse('hide');
                            });
                        </script>

I’m stuck at this point and would appreciate any help.

Is that a valid HTML input type value? If not, then use ‘class’.

1 Like