CODEWITHSUNDEEP
jquery
Paul Almond
Paul Almond

Reputation: 127

jQuery Filter Issue

I have the following script:

_OnFilterChange() {
  var input, filter, ul, li, a, i;
  input = $("#courseFilter");
  filter = input.val();

  $('li').each(function() {
    a = $("#title").val();
    var current = $('li');

    if (a.indexOf(filter) > -1) {
      current.addClass("active");
    } else {
      current.removeClass("active");
    };
  });
}

The script is designed to take the contents of the input for courseFilter and search the Titles of all the li in a list. Where there is a match (partial or full) a class for active is added or removed from the specific li that is matched.

For some reason its either showing everything (when no text is in the courseFilter) or its hiding everything when I type anything in the box.

I think its down to selecting the li but not sure how to isolate the li. Could anyone point me in the right direction?

Edit - HTML

<div class="calendar-occasions__course-filter">
    <input type="text" id="courseFilter" placeholder="Start searching for your course..." title="Type in a name">
</div>


<ul id="gallery" class="calendar-occasions__occasions">
    <li class="calendar-occasions__occasion" id="event-@b" data-id="@b">
        <div class="calendar-occasions__occasion-outer" data-calendar-ocasion-id="@categoryEvent.Id">
            <div class="calendar-occasions__occasion-inner calendar-occasion" data-component="components/toggle-class" data-toggle-class__class-name="calendar-occasion--show-breakdown" data-sync-height-element-key="panel">
                <div class="calendar-occasion__header" data-sync-height-element-key="header">
                    <div class="calendar-occasion__header-left">
                        @if (categoryEvent.StartSession == null)
                        {
                        <span class="calendar-occasion__date">
                            @Html.DateString(categoryEvent.Start)
                        </span>
                        }
                        else
                        {
                    <span class="calendar-occasion__date">
                        @Html.DateString(categoryEvent.StartSession.Start)
                    </span>
                        }
                        @if (categoryEvent.ActiveSessions.Count > 1)
                        {
                        <a href="javascript:void(0);" class="calendar-occasion__breakdown" data-toggle-class__hit>Session<br>Breakdown</a>
                        }
                    </div>
                    <div class="calendar-occasion__header-right">

                        <h3 id="title" class="calendar-occasion__start-session">@categoryEvent.Title</h3>
                        <h3 class="calendar-occasion__location">Bridgend</h3>
                        <span class="calendar-occasion__time-span">@categoryEvent.StartSession.Start.ToString("h:mmtt") - @categoryEvent.StartSession.End.ToString("h:mmtt") </span>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

Upvotes: 0

Views: 48

Answers (2)

Alexis Wilke
Alexis Wilke

Reputation: 20725

As mentioned by Alexis, you need to use $(this):

_OnFilterChange() {
  var input, filter, ul, li, a, i;
  input = $("#courseFilter");
  filter = input.val();

  $('li').each(function() {
    a = $("#title").val();
    var current = $(this);  // <-- here, replace 'li' by this

    if (a.indexOf(filter) > -1) {
      current.addClass("active");
    } else {
      current.removeClass("active");
    };
  });
}

That should be sufficient to see things work as expected in terms of "li".

Note that variable a should be set outside of the loop since its value does not vary depending on the li. Some of your variables are not used and could be removed. It's also a good idea to set the variable as it is declared as follow:

_OnFilterChange() {
  var input = input = $("#courseFilter"),
      filter = input.val(),
      a = $("#title").val();

  $('li').each(function() {
    var current = $(this);  // <-- here, replace 'li' by this

    if (a.indexOf(filter) > -1) {
      current.addClass("active");
    } else {
      current.removeClass("active");
    };
  });
}

Upvotes: 0

Alexis
Alexis

Reputation: 5831

id must be unique on a page, use class instead of duplicate id. You can get actual element by using $(this).

Example of working code:

$("#filter").keyup(function(){
  var value = $(this).val();
  $("li.title").each(function(){
   ($(this).text().indexOf(value) > -1 && value != "") ? $(this).addClass("active") : $(this).removeClass("active");
  })
})
.active{
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Seach in list" id="filter" />

<ul>
  <li class="title">a</li>
  <li class="title">ab</li>
  <li class="title">abc</li>
  <li class="title">abcd</li>
  <li class="title">abcde</li>
</ul>

Upvotes: 1

Related Questions