JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<div data-role="page" id="filterMe">
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li class="ui-screen-hidden"><a href="#">Acura</a></li>
<li class="ui-screen-hidden"><a href="#">Audi</a></li>
<li class="ui-screen-hidden"><a href="#">BMW</a></li>
<li class="ui-screen-hidden"><a href="#">Cadillac</a></li>
<li class="ui-screen-hidden"><a href="#">Chrysler</a></li>
<li class="ui-screen-hidden"><a href="#">Dodge</a></li>
<li class="ui-screen-hidden"><a href="#">Ferrari</a></li>
<li class="ui-screen-hidden"><a href="#">Ford</a></li>
<li class="ui-screen-hidden"><a href="#">GMC</a></li>
<li class="ui-screen-hidden"><a href="#">Honda</a></li>
<li class="ui-screen-hidden"><a href="#">Hyundai</a></li>
<li class="ui-screen-hidden"><a href="#">Infiniti</a></li>
<li class="ui-screen-hidden"><a href="#">Jeep</a></li>
<li class="ui-screen-hidden"><a href="#">Kia</a></li>
<li class="ui-screen-hidden"><a href="#">Lexus</a></li>
<li class="ui-screen-hidden"><a href="#">Mini</a></li>
<li class="ui-screen-hidden"><a href="#">Nissan</a></li>
<li class="ui-screen-hidden"><a href="#">Porsche</a></li>
<li class="ui-screen-hidden"><a href="#">Subaru</a></li>
<li class="ui-screen-hidden"><a href="#">Toyota</a></li>
<li class="ui-screen-hidden"><a href="#">Volkswagon</a></li>
<li class="ui-screen-hidden"><a href="#">Volvo</a></li>
</ul>
</div>
</div>
JavaScript
$("input[data-type='search']").keyup(function() {
if($(this).val() == '') {
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function() {
$("input[data-type='search']").val('');
$("input[data-type='search']").trigger('keyup');
});