Listview: Filter Reveal - change icon on click

By default, jQM styles filtered results with the carat-r icon, is there a way to override this, so when click it changes to the check icon?

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Cranberry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Orange</a></li>

Answers


The icon is just a class on the anchor tag inside the listitem, you could switch the class on item click:

<ul id="myList" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
  <li><a class="listItemClick" href="#">Apple</a></li>
  <li><a class="listItemClick" href="#">Banana</a></li>
  <li><a class="listItemClick" href="#">Cherry</a></li>
  <li><a class="listItemClick" href="#">Cranberry</a></li>
  <li><a class="listItemClick" href="#">Grape</a></li>
  <li><a class="listItemClick" href="#">Orange</a></li>
</ul>

$("#myList").on("click", ".listItemClick", function(){
    $(this).removeClass("ui-icon-carat-r").addClass("ui-icon-check");
});

DEMO


Need Your Help

PHP Encoding of Special Characters iso-8859-1

php character-encoding

My PHP script parses a web site and pulls out an HTML DIV that looks like this (and saves it as a string)