Navigation Typeahead search

runningcoder typeahead demo navigation_v1

HTML

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.css">
<header class="header"></header>

<div class="nav-wrapper">
    <nav class="nav-container">
        <div class="typeahead-container">
            <div class="typeahead-field">
                <span class="typeahead-query">
                    <input class="js-nav-typeahead-input" name="q" type="search" placeholder="Search"
                           autocomplete="off">
                    <i class="fa fa-search"></i>
                </span>
            </div>
        </div>
        <ul class="main-nav">
            <li>
                <a><i class="fa fa-home"></i> Home</a>
            </li>
            <li>
                <a><i class="fa fa-tasks"></i> Master Section <i class="fa fa-chevron-left pull-right"></i></a>
                <ul class="sub-nav">
                    <li>
                        <a>First Section</a>
                    </li>
                    <li>
                        <a>Second Section</a>
                    </li>
                </ul>
            </li>
            <li>
                <a><i class="fa fa-futbol-o"></i> Sports <i class="fa fa-chevron-left pull-right"></i></a>
                <ul class="sub-nav">
                    <li>
                        <a>Hockey</a>
                    </li>
                    <li>
                        <a>Baseball</a>
                    </li>
                    <li>
                        <a>Football</a>
                    </li>
                    <li>
                        <a>Golf</a>
  ...

CSS

.header {
    height: 50px;
    background: #f8f8f8;
}

.main-container {
    margin-left: 250px;
    background: #fff;
    padding: 10px;
}

.nav-wrapper {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 250px;
    height: calc(100% - 50px);
    background: #3a3633;
    overflow: hidden;
}

.nav-wrapper .typeahead-container {
    padding: 10px
}

.nav-wrapper .typeahead-container .typeahead-field input {
    border-width: 0 0 1px 0;
    border-color: #555;
    background: transparent;
    color: #c0bbb7;
    outline: none;
}

.typeahead-container .fa-search {
    color: #999;
    position: absolute;
    right: 10px;
    top: 10px;
}

.typeahead-container.hasText .fa-search {
    cursor: pointer;
}

.typeahead-container.hasText .fa-search:before {
    content: "\f00d";
}

.typeahead-container.hasText .fa-search:hover {
    color: #fff;
}

.nav-container {
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    transform: translateZ(0);
    -webkit-touch-callout: none;
    user-select: none;
    text-size-adjust: none;
}

.nav-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.nav-container a {
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
    color: #c0bbb7;
    display: block;
    line-height: normal;
}

.nav-container a:hover {
    color: #fff;
}

.sub-nav {
    display: none;
    background: rgba(69, 69, 69, 0.6);
    padding: 7px 0;
    position: relative;
}

.sub-nav > li:before {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    left: 23px;
    top: 16px;
    border-top: 1px solid #7A7A7A;
    z-index: 1;

}

.sub-nav a {
    padding-left: 42px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.sub-nav a:hover {
    background-color: rgba(69, 69, 69, 0.8);
}

.sub-nav a:active {
    background: #616161;
}

.sub-nav:before {
    content: "";
    display: block;
    position: absolute;
    z-index:...

JavaScript

.
$(function () {

    var element = $('.typeahead-container'),
        listItems = element.closest('.nav-wrapper').find('nav li'),
        data = $.map(listItems, function (v, i) {
            return {
                index: i,
                value: $(v).find('a:first').text().trim()
            }
        });

    $('.nav-container').find('> ul > li > a').on('click', function () {
        if (!$(this).siblings('ul.sub-nav')[0]) return;
        $(this).closest('li').toggleClass('open');
    });

    typeof $.typeahead === "function" && $.typeahead({
        input: '.js-nav-typeahead-input',
        minLength: 1,
        display: 'value',
        resultContainer: false,
        source: {
            data: data
        },
        callback: {
            onSearch: function (node, query) {

                this.container.toggleClass('hasText', query.length >= 1);

                listItems.toggleClass('hidden', query.length >= 1).removeClass('open');

            },
            onResult: function (node, query, result, resultCount, resultCountPerGroup) {

                var item,
                    isSubItem;

                for (var i = 0, len = result.length; i < len; ++i) {

                    item = $(listItems[result[i].index]);
                    isSubItem = item.parent().hasClass('sub-nav');

                    if (isSubItem) {
                        item.parent().closest('li').attr('class', 'open')
                    }

                    item.removeClass('hidden')
                }
            }
        },
        debug: true
    });

    $(document).on('click', '.typeahead-container.hasText .fa-search', function () {
        $('.js-nav-typeahead-input').val('').trigger('input.typeahead');
    });

})