CODEWITHSUNDEEP
javascriptjquery
Rezzo
Rezzo

Reputation: 47

Filter Data on Submit

I'm trying to create a dynamic search filter that will show/hide properties in certain states and cities as well as update the count of how many properties are showing based on the search results.

I was able to partially get something to work, but something isn't working when it comes to the dynamic count.

So to start this is how I have my HTML set up:

var numProperties = $('.c-property:visible').length;

$('.c-properties-summary__count').html(numProperties);

$('.c-search').submit(function(e){
    e.preventDefault();

    var userData = $('input[type="search"]').val().toLowerCase();

    $('.c-property').each(function(){
        var propertyState = $(this).data('state'),
            propertyCity  = $(this).data('city'),
            numProperties = $('.c-property:visible').length;

        if (userData.length) {
            if (userData === propertyState) {
                $(this).show();
            } else if (userData === propertyCity) {
                $(this).show();
            } else {
                $(this).hide();
            }
        } else {
            $(this).show();
        }

        $('.c-properties-summary__count').html(numProperties);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="c-properties-summary">
    <h3><span class="c-properties-summary__count"></span> Properties</h3>
</div>

<form class="c-search" action="/">
    <label for="location">Location</label>
    <input name="location" type="search" value="" placeholder="State or City">
    <input class="c-btn c-btn--blue" type="submit" value="Filter">
</form>

<ul class="c-properties">
    <li class="c-property" data-state="az" data-city="avondale">Avondale</li>
    <li class="c-property" data-state="az" data-city="tempe">Tempe</li>
    <li class="c-property" data-state="az" data-city="phoenix">Phoenix</li>
    <li class="c-property" data-state="al" data-city="birmingham">Birmingham</li>
    <li class="c-property" data-state="fl" data-city="tallahassee">Tallahassee</li>
</ul>

As of right now the script only seems to work on the first attempt. For example, if I try searching for AZ it hides all the other properties and returns a count of 3 which is correct. Now if I immediately try another search for FL it hides all the other properties correctly, but the count being shown is incorrect, it shows 2 even though only one property is showing.

I've been going at this for a few hours so if anyone could provide some guidance it would be much appreciated.

Upvotes: 1

Views: 2102

Answers (2)

AsgarAli
AsgarAli

Reputation: 2211

No need to use any loop for searching. Suppose if you have 10000 data then it will surely affect your web-page performance.

Try the below shorter code rather than using a long code.

function startSearching() {
    $("ul.c-properties li").show();
    var strUserInput = $.trim($('input[type="search"]').val().toLowerCase());
    if (strUserInput)
    {
        $("ul.c-properties li").hide();
        $('li[data-state*="' + strUserInput + '"]').show();
        $('li[data-city*="' + strUserInput + '"]').show();
    }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c-properties-summary">
    <h3><span class="c-properties-summary__count"></span> Properties</h3>
</div>

<form class="c-search" action="/">
    <label for="location">Location</label>
    <input name="location" type="search" value="" placeholder="State or City">
    <input class="c-btn c-btn--blue" type="button" value="Filter" onclick="startSearching()">
</form>

<ul class="c-properties">
    <li class="c-property" data-state="az" data-city="avondale">Avondale (az)</li>
    <li class="c-property" data-state="az" data-city="tempe">Tempe (az)</li>
    <li class="c-property" data-state="az" data-city="phoenix">Phoenix (az)</li>
    <li class="c-property" data-state="al" data-city="birmingham">Birmingham (al)</li>
    <li class="c-property" data-state="fl" data-city="tallahassee">Tallahassee (fl)</li>
</ul>

Upvotes: 3

stark
stark

Reputation: 2256

Fixed it. Check my snippet below. You need to put these statements : 

numProperties = $('.c-property:visible').length;
$('.c-properties-summary__count').html(numProperties);

outside the block in which you are traversing through each li with class c-property

Snippet:

var numProperties = $('.c-property:visible').length;

$('.c-properties-summary__count').html(numProperties);

$('.c-search').submit(function(e) {
  e.preventDefault();
  var userData = $('input[type="search"]').val().toLowerCase();
  $('.c-property').each(function() {
    var propertyState = $(this).data('state'),
      propertyCity = $(this).data('city');
    $(this).toggle(!userData || userData === propertyState || userData === propertyCity);
  });
  numProperties = $('.c-property:visible').length;
  $('.c-properties-summary__count').html(numProperties);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="c-properties-summary">
  <h3><span class="c-properties-summary__count"></span> Properties</h3>
</div>

<form class="c-search" action="/">
  <label for="location">Location</label>
  <input name="location" type="search" value="" placeholder="State or City">
  <input class="c-btn c-btn--blue" type="submit" value="Filter">
</form>

<ul class="c-properties">
  <li class="c-property" data-state="az" data-city="avondale">Avondale</li>
  <li class="c-property" data-state="az" data-city="tempe">Tempe</li>
  <li class="c-property" data-state="az" data-city="phoenix">Phoenix</li>
  <li class="c-property" data-state="al" data-city="birmingham">Birmingham</li>
  <li class="c-property" data-state="fl" data-city="tallahassee">Tallahassee</li>
</ul>

Upvotes: 2

Related Questions