Dojo list filter

Filters a list and applies highlighting to matching search terms.

by dzul1983

HTML

<input type="text" id="search" />
<ul id="list">
    <li>Lorem ipsum dolor sit</li>
    <li>Consectetur adipiscing elit</li>
    <li>Nunc tincidunt, dui ac consectetur mollis</li>
    <li>Dolor leo porttitor odio</li>
    <li>Ut malesuada metus arcu id sapien</li>
    <li>Donec id hendrerit arcu</li>
    <li>In hac habitasse platea dictumst</li>
</ul>

CSS

.highlighted {
    background-color: yellow;
}

JavaScript

require(['dojo', 'dojo/dom-class'], function(dojo, domClass){
    var searchField = dojo.byId('search');
    var searchList = dojo.byId('list');
    
    function filterList(searchTerm){
        var lis = dojo.query('li', searchList);
        
        for(var i=0, i_len=lis.length; i<i_len; i++){
            var current = lis[i];
            // remove highlighted
            current.innerHTML = current.innerHTML.replace(/<\/?[^>]+(>|$)/g, '');
            
            if(searchTerm.length > 0) {
                // apply hightlighting
                current.innerHTML = current.innerHTML.replace(new RegExp('(' + searchTerm + ')','ig'), '<span class="highlighted">$1</span>');
            }
            
            if(dojo.query('.highlighted', current).length > 0 || searchTerm.length == 0){
                dojo.style(current, 'display', '');
            } else {
                dojo.style(current, 'display', 'none');
            }
        }
    }
    
    dojo.ready(function(){
        var t;
        dojo.connect(searchField, 'keypress', function(){
            clearTimeout(t);
            t = setTimeout(function(){
                filterList(searchField.value);
            }, 300);
        });
        searchField.focus();
    });
});