February 2015

Gavin Pickin

HTML 5 Search Input with jQuery Multi Token Search

Javascript, jQuery

Recently I found myself playing with another HTML 5 form element, the Search Input. Of course the form field support is not there yet… so I decided to use jQuery’s version since I was already using jQuery Mobile on an App. Quite a nice upgrade, it gives you some standard features that you might normally struggle to complete on your own… like the rounded corners, and the cancel/clear search field. Of course webkit goes further with remembering the last x searches, and can even fire a “search” event when a user pauses while typing… but sadly, we have to live in a world where you can’t use all the bells and whistles all at once… but jQuery as usual fills in the important gaps nicely.

As I mentioned, working on this jQuery Mobile App (I started this one before I spent much time working with Ionic which is amazing if you didn’t know already) I wanted to use a Search Input, to filter some tables of data. jQuery offers some simple methods which I have used before, but I thought I’d try out this new input type, search.

Assuming the “search” event is not safe, I added the keyup event handler.

<!--- HTML --->
<div data-role="fieldcontain">
    <label for="training_filter_field">Filter Trainings:</label>
    <input type="search" name="training_filter_field" id="training_filter_field" value="" />


//JS On Document Ready
var $rows = $('#table tr');
$('#training_filter_field').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $ {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);

That got me thinking, what about the Search Cancel Button? What events does that emit? Of course the beauty of the input element is it automatically clears the search input, but we need to reset the search when someone clicks it. After doing some research, I did not find a clear answer, so I decided to experiment. I found that because the focus on the search input was lost and then regained as the field was reset, it fires the change event on the text input. To not duplicate the search code, I just use the on change event handler to trigger a keyup event on the search field with this code.

$('#training_filter_field').on('change', function(){

That seemed to work perfectly.

Short and sweet, and a power small filter… but I wanted more. I wondered if we could search multiple tokens, to create a more powerful filter, or would I have to resort to building my own. Coming from search side, I am used to building the UI to do whatever I need it to, but I wanted to see what was out there already.
Sure enough, in a few clicks, with the right search phrase, I had found a great example, simple example, like above ( it was so good I replaced my simple code above with this ) and then a slick multiple token filter.

Thank you dfsq from Stackoverflow


var $rows = $('#training-list tbody tr');
$('#training_filter_field').keyup(function() {
    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),

    $ {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);

$('#training_filter_field').on('change', function(){

With that small chunk of code, with the on change search input, I had a nice simple but powerful UI for search and filter on my table.
Of course, some of you might say that you don’t need jquery for everything, and you’re right. I know this can be done without jQuery, but its baked into my app, and this can’t get much easier, so why not make use of it.

Gotta love jQuery, new standard features coming like HTML 5 forms, and even StackOverflow. Although I have come to learn that StackOverflow is a lot like an antique shop, there is a lot of crap in there, but there are some priceless items hiding there too.

Blog Search