Question

I’ve a search feature in one of code which ideally performs a search on the list of values (small number).

<li>abc</li> 
<li>def</li> 
...

I’ve a search button in the bottom, I put a keyup event listener to get instant searches. Now the question is how can I make it navigable.
Ideal scenario search for some text, hit enter and it should open the first element, else you should be able to navigate through.

If I’m not clear above I’m actually asking for a feature very similar to Facebook Chat sidebar search.

Answer 1

For the sake of the OP who has not added jQuery to the list of tags ( I congratulate you ), I’ll add a small navigation plugin in pure JavaScript.

Disclosure – the credit for the actual logic would go to Eric Priestley of Facebook fame as this was lifted from his Javelin JS library.

I’m posting a link to the fiddle here. I also assume from your question that you already have a search solution in place and are simply looking for a navigation solution.

Cross posting from fiddle. I’ve commented a lot in the code, so should be self explanatory. Though if you do have doubts, get in touch.

HTML
Can be anything you desire. For brevity, I’ve added this

<input id='control' type='text' placeholder='Search text here' />
<!-- List of results - hardcoded for now -->
<ul id='hardpoint' class='hidden'>
    <li class='item'>Search item 1</li>
    <li class='item'>Search item 2</li>
    <li class='item'>Search item 3</li>
    <li class='item'>Search item 4</li>
</ul>​

The code

(function() {


    /**
     * Helper functions
     */
    var bind = function( context, func, more ){
        if (typeof func !== 'function') {
            throw new Error ("No function supplied to bind function");
        }
        var bound = Array.prototype.slice.call( arguments ).slice(2);
        if (func.bind) {
            return func.bind.apply(func, [context].concat(bound));
        }
        return function() {
            return func.apply(context || window, bound.concat(Array.prototype.slice.call( arguments )));
        }
    };

    var getChildElements = function(node) {
        var childNodes = Array.prototype.slice.call(node.childNodes);
        childNodes = childNodes.filter(function(item) {
            return item.tagName && item.nodeType && item.nodeType === 1 && item !== node;
        });
        return childNodes;
    };

    var hasClass = function(node, className) {
        return ((' ' + node.className + ' ').indexOf(' ' + className + ' ') > -1);
    };

    var alterClass = function(node, className, add) {
        var has = hasClass(node, className);
        if (add && !has) {
            node.className = node.className.trim() + ' ' + className;
        }
        else if (has && !add) {
            node.className = node.className.replace(
            new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), ' ');
        }
    };

    var getIndex = function( list, element ){
        var index = -1;
        for (var i = 0; i < list.length; i++) {
            if( list[i] === element ){
                index = i;
                break;
            }
        };
        return index;
    };


    // Start of plugin
    // Constructor
    var ListNavigator = function(config) {};

    // This can be moved within constructor if you so prefer
    ListNavigator.prototype.init = function(config) {
        // On what element do you want the controls to activate
        // Pressing up down etc on this element, triggers tha navigation
        this.control = document.getElementById(config.control);

        // The list of results that can be navigated
        this.hardpoint = document.getElementById(config.hardpoint);

        // A list of items ( usually, childNodes ) of hardpoint
        // Dynamically populated
        this.display =  getChildElements(this.hardpoint);;

        // What to set the focus on initially
        this.focus = -1;

        // Specify a function to execute when the user chooses a result
        // Keydown - Return : configured to be the choose event type now
        this.choose = config.choose;

        this.selector = config.selector;
    };

    ListNavigator.prototype.run = function() {
        var controlEvents = ['focus', 'blur', 'keydown', 'input'],
            mouseEvents = [ 'mouseover', 'mouseout', 'mousedown' ],
            self = this,
            selector = this.selector;

        controlEvents.forEach(function(event) {
            self.control.addEventListener(event, bind(self, self.handleEvent), false);
        });

        mouseEvents.forEach(function(event) {
            self.hardpoint.addEventListener(event, bind(self, self.onmouse), true);
        });
    };

    // Logic to change the focus on keydown
    ListNavigator.prototype.changeFocus = function(d) {
        var n = Math.min( Math.max( -1, this.focus + d ), this.display.length - 1);

        if (this.focus >= 0 && this.focus < this.display.length) {
            alterClass(this.display[this.focus], 'focused', false);
        }

        this.focus = n;
        this.drawFocus();
        return true;
    };

    // Set the focus on the targetted element
    ListNavigator.prototype.drawFocus = function() {
        var f = this.display[this.focus];
        if (f) {
            alterClass(f, 'focused', true);
        }
    };

    // Handle mouse events
    ListNavigator.prototype.onmouse = function(event) {
        var target = event.target, type = event.type;
        if ( hasClass( target, this.selector ) ) {
            if ( type === 'mousedown' ) {
                // Choose this element
                this.choose(target);
            }
            else if ( type === 'mouseover' ) {
                // Set the focus to element on which mouse is hovering on
                this.focus = getIndex( this.display, target );
                this.drawFocus();
            } 
            else if ( type === 'mouseout' ){
                // Reset the display to none
                this.changeFocus(Number.NEGATIVE_INFINITY);
            }
        };
    };

    ListNavigator.prototype.handleEvent = function(e) {
        var type = e.type;
        if (type === 'blur') {
            this.focused = false;
            this.hide();
        } else {
            alterClass(this.hardpoint, 'hidden', false);
            this.update(e);
        }
    };

    ListNavigator.prototype.hide = function() {
        this.changeFocus(Number.NEGATIVE_INFINITY);
        this.display = [];
        alterClass(this.hardpoint, 'hidden', true);
    };

    ListNavigator.prototype.submit = function() {
        if (this.focus >= 0 && this.display[this.focus]) {
            this.choose(this.display[this.focus]);
        } else {

            if (this.display.length) {
                this.changeFocus(1);
                this.choose(this.display[this.focus]);
            }
        }
        return false;
    };

    ListNavigator.prototype.update = function(event) {

        console.log( 'upadte' );
        this.display = getChildElements(this.hardpoint);

        if (event.type === 'focus') {
            this.focused = true;
        }

        var k = event.which;
        if (k && event.type == 'keydown') {
            switch (k) {
            case 38:
                if (this.display.length && this.changeFocus(-1)) {
                    event.stopPropagation();
                }
                break;
            case 40:
                if (this.display.length && this.changeFocus(1)) {
                    event.stopPropagation();
                }
                break;
            case 13:
                if (this.display.length) {
                    this.hide();
                    event.stopPropagation();
                    this.submit();
                }
                break;
            case 27:
                if (this.display.length) {
                    this.hide();
                    event.stopPropagation();
                }
                break;
            case 9:
                // If the user tabs out of the field, don't refresh.
                return;
            }
        }

    };

    window.ListNav = ListNavigator

})();

var nav = new ListNav();
nav.init({
    control: 'control',
    hardpoint: 'hardpoint',
    selector: 'item',
    choose: function(){
        console.log( arguments );
    }
});
nav.run();​