- How to Create a Search Filter Bar
- How to Create Custom Search Filters
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
How to Create Custom Search Filters
Creating a custom search filter requires some level of expertise with JavaScript and the jQuery Mobile API. This section shows you how to tap into the API.
The jQuery Mobile framework includes a filterCallback option in the listview component that can be extended with a custom callback function. Any callback function that extends this option will receive two arguments, which include the text and searchValue argument. The text argument is the value of the current list item, or in other words, the value of the list item that is the current index in the loop of list items. The searchValue argument is the value of the search text that is being typed into the search filter. A loop occurs as users type their custom search string into the search filter; by default, the loop iterates through the list and compares the list item text and the search value to filter the results as necessary.
In order to extending the filterCallback option, you’ll need to add an id to the page:
<div id="custom-format-page" data-role="page">
And an id to the listview component:
<ul id="custom-format-listview" data-role="listview" data-filter="true">
Then you can use the following JavaScript, which waits for the document to be ready, then for the page to initialize via jQuery Mobile and finally extends the filterCallback option for the listview component in question.
$(document).ready(function() {
$('div#custom-format-page').on({
pageinit: function(event) {
$('#custom-format-listview').listview('option', 'filterCallback', defaultSearch);
}
});
});
In this example, I’ve simply extended the filterCallback option with a callback function that mimics the default search in order to show how it all works.
function defaultSearch( text, searchValue ) {
//console.log("Text: "+ text, ", SearchValue: "+ searchValue);
return text.toLowerCase().indexOf( searchValue ) === -1;
}
The defaultSearch callback function accepts the two arguments mentioned and checks the text from the list item for an indexOf the searchValue that is being typed into the search filter. If the function returns true, the list item remains in the list of filtered results; if not, the list item is removed. Uncomment the console.log to see the arguments as the list is iterated. This is a great way to understand how this callback function works and ultimately how to write your own.
Now that we’ve taken a look at how to extend the filterCallback function, let’s see how to add custom search filtering. First, let’s change the callback function to a function named onlyBody:
$(document).ready(function() {
$('div#custom-format-page').on({
pageinit: function(event) {
$('#custom-format-listview').listview('option', 'filterCallback', onlyBody);
}
});
});
The onlyBody function will only search the body copy in the custom formatted list and return results that match. More specifically, the text argument is split, and only matching results from the body copy or the p element are searched.
function onlyBody( text, searchValue ) {
var splitText = text.trim().split("\n");
//console.log("text: "+ splitText[1]);
return splitText[1].toLowerCase().indexOf( searchValue ) === -1;
}
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
Figure 2 shows an example of the onlyBody function as it runs in a browser with the console.log uncommented.
)
As you can see, the text that is being searched is only the body copy after the content has been split.