Filterable list
By Marcin Olejarz
Using this jquery implementations we can filter list which is grouped by first letter. It's not ordering by itself so we have to write names in correctly alphabet order. Using jQuery code gives unordered list. You have to remember setting Internet privilege for external scripts and style sheets.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>Filter:</h2>
<form class="ui-filterable">
<input id="Filter" data-type="search">
</form>
<h2>Contacts:</h2>
<ul data-role="listview" data-filter="true" data-input="#Filter" data-autodividers="true" data-inset="true">
<li><a href="#">Adam</a></li>
<li><a href="#">Afrodyta</a></li>
<li><a href="#">Armando</a></li>
<li><a href="#">Benny</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Dan</a></li>
<li><a href="#">Eric</a></li>
<li><a href="#">Kevin</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Paul</a></li>
<li><a href="#">Penny</a></li>
<li><a href="#">Roman</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valkyrie</a></li>
</ul>
</div>
</div>
</body>
</html>