CODEWITHSUNDEEP
javascriptjquery
William Cunningham
William Cunningham

Reputation: 583

Is keyup what I should be using?

I'm using keyup event handler and filtering some elements. When there are no elements that contain what i am searching for, I display a message that there are not results and remove it when there are results. This is working just fine except in this situation:

Type in something that doesn't have any results. Now hold down "backspace" to delete the characters quickly. The "no results" are still displayed. Seems to be a timing issue or maybe I shouldn't be using keyup. Any thoughts?

Here is a codepen: https://codepen.io/west4me/pen/dQZxMZ

I think it may be the keyup:

$("#filter").keyup(function() {
	var selectSize = $(this).val();
	filter(selectSize);
});

$("#filter").keyup(function() {
  var selectSize = $(this).val();
  filter(selectSize);
});

function filter(e) {
  var numVisible = 0;
  var addCard = $('.ourTeamCards');
  if (e) {
    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
    $('.oneStaff').fadeOut(50).filter(function() {
      var regExists = regex.test($(this).data('regions'));
      if (regExists) {
        numVisible += 1;
      }
      return regExists;
    }).fadeIn(50);
    if (numVisible == 0) {
      $('.noResults').css('display', 'block');
    } else {
      $('.noResults').css('display', 'none');
    }
  } else {
    $('.oneStaff').fadeIn(50);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-12">
    <div class="filterSearch">
      <h1 class="">Filter</h1>
      <input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
      <span class="d-block mt-2 searchIns">Search by country or state</span>
    </div>
  </div>
</div>
<div class="row ourTeamCards">
  <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
    Name
  </div>
  <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
    Name
  </div>
  <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
    Name
  </div>
</div>
<div class="noResults" style="display:none;">No Results</div>

Upvotes: 2

Views: 82

Answers (2)

Rut Shah
Rut Shah

Reputation: 1278

I have made some changes the way you are extracting text box value. Give it a try and let me know.

This will identify backspace too so it will help in doing the operation you want. I did not get chance to look whole code but spotted this at start so sharing you the suggestion.

$("#filter").keyup(function(e) {
    var selectSize = e.target.value;
  console.log(selectSize)
    filter(selectSize);
});

Cheers!

Upvotes: 0

Smile
Smile

Reputation: 2758

Your else part should be like below: (see line with comment //THIS IS A CHANGE). With said that if no value is in search box, "No Results" should be hidden.

function filter(e) {
    var numVisible = 0;
    var addCard = $('.ourTeamCards');
    if(e) {
        var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
        $('.oneStaff').fadeOut(50).filter(function () {
            var regExists = regex.test($(this).data('regions'));
            if(regExists) {
                numVisible +=1; 
            }
            return regExists;
        }).fadeIn(50);
        if (numVisible == 0 && e) {
            $('.noResults').css('display', 'block');    
        }
        else {
            $('.noResults').css('display', 'none');
        }
    }   
    else {
      $('.oneStaff').fadeIn(50);
      $('.noResults').css('display', 'none'); //THIS IS A CHANGE
    }   
}

Upvotes: 1

Related Questions