I have a search filter in my jquery mobile site.by default the search filter automatically filters the list when i enter the search keyword.but i need it to filter the list after pressing enter key.`
<!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.2.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>My Phonebook</h2>
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
</div>
</body>
</html>
`
You can disable filtering by having custom code responding to the filterablebeforefilter event and using preventDefault there. A way of knowing whether to cancel the filtering could be to always block except if the enter key was just pressed.
var blockNextFilter = true;
$("#myFilter").keyup(function(e){
// respond to enter key only
if (e.keyCode == 13)
{
blockNextFilter = false;
// trigger a change event to force the filter code to trigger
$("#myFilter").change();
}
});
$("ul").on("filterablebeforefilter", function( e, data ) {
// disable auto-filtering
if (blockNextFilter) {
e.preventDefault();
}
// except when we're told so
else {
blockNextFilter = true;
}
});