Starts With Instead of Contains Filter Text


The filterable widget provided by jQuery Mobile (jQM) allows the user to filter child elements by typing search text into a text box. The built-in behavior is to see if the search text is contained in any of the children elements’ text or a special data attribute called data-filtertext.  But what if you want the filter to only show elements that start with the typed in search text?

To accomplish this, we can override the default filtering by assigning the filterCalback property to a function. This function is then called for each child element with an index parameter and a second parameter for the search text the user typed. Within this function we can perform our own filter matching and return true if the child element should be filtered (hidden). So, lets build our Starts With Filter.

HTML Markup

For the HTML markup, everything looks the same as the default filtering setup. For our example, we will have a listview that displays a list of names and has autodividers turned on:

<form class="ui-filterable">
  <input id="myFilter" data-type="search" placeholder="Enter search text..." />
</form>
<ul id="myList" data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
  <li data-filtertext="project manager"><a href="#">Aaron</a></li>
  <li><a href="#">Adam</a></li>
  <li><a href="#">Alexander</a></li>
  <li><a href="#">Alice</a></li>
  <li><a href="#">Andrew</a></li>
  <li><a href="#">Anna</a></li>
  <li><a href="#">Anthony</a></li>
  <li><a href="#">Audrey</a></li>
  <li><a href="#">Benjamin</a></li>
  <li><a href="#">Brandon</a></li>
  <li><a href="#">Brody</a></li>
  <li><a href="#">Caleb</a></li>
...
  <li><a href="#">Tyler</a></li>
  <li><a href="#">Violet</a></li>
  <li><a href="#">Vivienne</a></li>
  <li><a href="#">William</a></li>
  <li><a href="#">Xavier</a></li>
  <li><a href="#">Zachary</a></li>
  <li><a href="#">Zoe</a></li>            
</ul>

 

The first name in the list also has some extra filter text: data-filtertext=”project manager”. So if you type the letter ‘p’ into the filter input, we would expect all listitems starting with p and the listitem for Adam to be displayed.

Script

In order to override the default filtering behavior, we need to provide JavaScript that assigns the filterCallback property of the filterable widget to our own custom filtering function:

$(document).on("pagecreate", "#page1", function(){
    $("#myList").filterable('option', 'filterCallback', startsWithSearch);
});

 

function startsWithSearch( idx, searchValue ) {
    var ret = false;
    if (searchValue && searchValue.length > 0){        
        var text = $(this).text().toLowerCase();
        var filttext = $(this).data("filtertext") || '';
        filttext = filttext.toLowerCase();
        if( text.lastIndexOf(searchValue.toLowerCase(), 0) != 0 && filttext.lastIndexOf(searchValue.toLowerCase(), 0) != 0){
            ret = true; //filter this one out
        }
    } 
    return ret;
}

The callback function is called once for each of the items in the filterable and its context is set to the item DOM element for which a decision is needed.  We can, therefore, use the keyword this to refer to the item DOM element.

The startsWithSearch function gets the child element text and the data-filtertext attribute if it exists, then if search text has been entered, we see if either the listitem text or data-filtertext starts with the search text. If it does NOT, we return true which tells the filterable widget to mark this element as hidden in the page. To make the filter case insensitive, we convert all strings to lower case before comparing them; and as JavaScript does not have a string.startsWith() function built in, I am using lastIndexOf().

Demo

I have created a jsFiddle that demonstrates the use of the filterCallback to achive starts with filtering.

jQM 1.4 filter on starts with

As you type letters in the filter input, you will see that only listitems and dividers whose text or data-filtertext starts with these letters remain visible.

Buy Me A Coffee :) @ ko-fi.com

Advertisements

2 thoughts on “Starts With Instead of Contains Filter Text

  1. Hi OMAR..I have multi page(single HTML file divided into pages) app using JQM. i need to pass param from first page to second page via url (got success) after that i need to pass new param from second page to third page when view the url in third page still it shows the first page param. And one more problem is want to refresh the current page(like third page) so use reload : true but it goes whole page reload (all three pages reload ).

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s