Sublime Text like fuzzy search

by Trevor Dixon

HTML

<input id="search" placeholder="Search">
<ul id="results"></ul>

JavaScript

var items = [
    '/home/user/code/folder/whatever/something/nothing/neat.js',
    '/home/user/code/folder/whatever/something/nothing/great.js',
    '/home/user/code/folder/whatever/something/nothing/stuff.html',
    '/home/user/code/folder/whatever/something/nothing/elmo.css',
    '/home/user/code/folder/whatever/something/nothing/animal.css',
    '/usr/local/lib/blah',
    '/foo/bar/baz/goo/blue'
];

$('#search').keyup(function() {
    var search = $(this).val();
    
    /* Matching logic */
    var matches = items.filter(function(item) {
        var j = 0; // remembers position of last found character
        
        // consider each search character one at a time
        for (var i = 0; i < search.length; i++) {
            var l = search[i];
            if (l == ' ') continue;     // ignore spaces
            
            j = item.indexOf(l, j+1);     // search for character & update position
            if (j == -1) return false;  // if it's not found, exclude this item
        }
        return true;
    });
    /* End matching logic */
    
    $('#results').empty();
    matches.forEach(function(match) {
        $('#results').append($('<li>').text(match));
    });
}).keyup();