JQuery mobile search without auto filter

I have a search filter on my jquery mobile site. By default, the search filter will automatically filter the list when I enter a keyword search. 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>

      

`

+3


source to share


1 answer


You can disable filtering by using custom event response code filterablebeforefilter

and using the preventDefault function. The way to know if filtering should be canceled can always be blocked unless the enter key has been 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;
  }
});

      



JSFiddle here

+1


source







All Articles