1

I have this script I made, but I need help to complete it. I want to show a message if isotope filters return no results.

So far, the script works if I use one function at a time (one function is for input field and one function is for select fields), but I need to combine functions so if I use input or select (or both) it will work.

My select function is commented out because, like I said, they don't work together so far.

Here's my code so far:

let selectChange = $('#filters select');
let inputChange = $('#filters input');
let noResults = $('.no-results');
let reset = $('#isotope-reset');
    
selectChange.change(function() {
    if($('.container.isotope').children(':visible').length == 0) {
              //noResults.show();
    }else {
        //noResults.hide();
    }
});
inputChange.on('input', function() {
    if($('.container.isotope').children(':visible').length == 0) {
      noResults.show();
    }else {
        noResults.hide();
    }
});

    reset.on('click', function() {
        noResults.hide();
});

Any help would be appreciated. Thanks!

isherwood
  • 58,414
  • 16
  • 114
  • 157
MinPower
  • 89
  • 5

1 Answers1

2

There's a number of ways you can do this. I'll show a couple. You can combine selectors/events like so:

let filtersChange = $('#filters').find('select,input');

And then combine the events:

filtersChange.on('input change', function(e) {
    code here
});

And if you need to detect which selector/event is triggered. By putting the "e" as the argument to the function, that gives us access to the event object. You can use whatever variable you want to bind the event object to, but "e" is commonplace, e for event, and a lot of people like to be more explicit and use "event". So this:

filtersChange.on('input change', function(e) {

Or this:

filtersChange.on('input change', function(event) {

Choice is yours. By passing the event object into the function, you can determine the type of event:

filtersChange.on('input change', function(event) {
    if (event.type === 'change') {
        \\do something
    } else {  \\event.type will equal 'input'
        \\do something else
    }
});

And then if you need to determine the selector:

filtersChange.on('input change', function(event) {
    if ($(this).is('select')) {
        \\do something with select boxes only
    } else {  \\$(this).is('input')
        \\do something else with input boxes only
    }
});

This is what I would probably have done in your situation:

<select class="filter" name="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<input class="filter" name="mySelect" value="myValue" />

And then any element with class "filter" will respond to those events:

$('.filter').on('change input', function(e) {
    if ($('.container.isotope').children(':visible').length == 0) {
        noResults.show();
    } else {
        noResults.hide();
    }
});

That was more than I had intended to write.

ionalchemist
  • 398
  • 2
  • 17