jQuery Mobile Cookbook: C5R8 - Custom List Filter (Advanced)

fiddle.css

div[data-role='header'] h1 { font-weight: bold; }
.ui-li-desc strong { font-weight: bold; }
div[data-role='footer'] a { text-decoration: none; }​

fiddle.html

<div data-role="page">

    <div data-role="header">
        <h1>Star Trek: The Next Generation</h1>
    </div>

    <div data-role="content">    
        <ul id="members" data-role="listview" data-filter="true">
            <li>
                <a href="index.html">
                    <h3>Jean-Luc Picard</h3>
                    <p><strong>Captain</strong></p>
                    <p>Patrick Stewart</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>William Thomas "Will" Riker</h3>
                    <p><strong>Commander, later Captain</strong></p>
                    <p>Jonathan Frakes</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Data</h3>
                    <p><strong>Lt. Commander</strong></p>
                    <p>Brent Spiner</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Geordi La Forge</h3>
                    <p><strong> Lt. Junior Grade (1), Lieutenant (2), Lt. Commander (3–7)</strong></p>
                    <p>LeVar Burton</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Worf</h3>
                    <p><strong>Lt. Junior Grade (1–2), Lieutenant (3–7), Lt. Commander (Generations)</strong></p>
                    <p>Michael Dorn</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Doctor Beverly Crusher</h3>
                    <p><strong>Commander</strong></p>
                    <p>Gates McFadden</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Tactical Officer Natasha Yar "Tasha"</h3>
                    <p><strong>Lieutenant</strong></p>
                    <p>Denise Crosby</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Doctor Katherine Pulaski</h3>
                    <p><strong>Commander</strong></p>
                    <p>Diana Muldaur</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Deanna Troi</h3>
                    <p><strong>Lt. Commander (1–7), Commander (7)</strong></p>
                    <p>Marina Sirtis</p>
                </a>
            </li>
            <li>
                <a href="index.html">
                    <h3>Wesley Crusher</h3>
                    <p><strong>Acting Ensign (1–3), Ensign (3–4), Cadet (Recurring)</strong></p>
                    <p>Wil Wheaton</p>
                </a>
            </li>
        </ul>
    </div>

    <div data-role="footer">
        <h4><a href="http://en.wikipedia.org/wiki/List_of_Star_Trek_characters#Star_Trek:_The_Next_Generation">List of Star Trek Characters</a></h4>
    </div>

</div>
​

fiddle.js

$( document ).ready( function() {
    $( "#members" ).listview( "option", "filterCallback", jqmCookbook.filterMethods.startsWith({ split: true }) );
});

(function( jqmCookbook, $, undefined ) {
  jqmCookbook.filterMethods = filterMethods = {};
    
  filterMethods.contains = function( options ) {
    return function( text, searchValue ) {
      var matches = false;
      
      options = $.extend( {}, filterMethods.contains.options, options );
      text = massageText( text, options );        
      matches = text.indexOf( searchValue ) >= 0;
      
      return !matches;
    }; 
  };
  filterMethods.contains.options = { caseSensitive: false, trim: false };

  filterMethods.startsWith = function( options ) {
    return function( text, searchValue ) {
      var matches = false, words;
      
      options = $.extend( {}, filterMethods.startsWith.options, options );
      text = massageText( text, options );        
      if ( options.split ) {
        words = text.split( /\s+/g );
        $.each( words, function( index, word ) {
          matches = word.indexOf( searchValue ) === 0;
          if ( matches ) { return false; }        
        });
      } else {
        matches = text.indexOf( searchValue ) === 0;
      }
            
      return !matches;
    };
  };
  filterMethods.startsWith.options = { 
    caseSensitive: false, 
    trim: false,
    split: false
  };
    
  function massageText( text, options ) {
    text = options.trim ? $.trim( text ) : text;
    return options.caseSensitive ? text : text.toLowerCase();      
  }    
})( window.jqmCookbook = window.jqmCookbook || {}, jQuery );

fiddle.manifest

name: jQuery Mobile Cookbook C5R8 Custom List Filter (Advanced)
description: Overriding the Default Algorithm for the Filter Box
authors:
  - Elijah Manor
resources:
  - http://dl.dropbox.com/u/200135/jQueryMobileCookbook/custom-scripting.js
  - http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css
  - http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js
normalize_css: no