Omnisearch

Add functionality to your website with the new omnisearch feature that brings on top the search form and some suggestions.

Example

In order to toggle the omnisearch, on the trigger button add the data-action="omnisearch-open" and data-target="#omnisearch" attributes.

<div class="dropdown">
    <button class="btn btn-primary" data-action="omnisearch-open" data-target="#omnisearch">
        Omnisearch
    </button>
</div>

Afterwards, simply add the omnisearch component in the <body> element.

<div id="omnisearch" class="omnisearch">
    <div class="container">
        <!-- Search form -->
        <form class="omnisearch-form">
            <div class="form-group">
                <div class="input-group input-group-merge input-group-flush">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="far fa-search"></i></span>
                    </div>
                    <input type="text" class="form-control" placeholder="Type and hit enter ...">
                </div>
            </div>
        </form>
        <div class="omnisearch-suggestions">
            <h6 class="heading">Search Suggestions</h6>
            <div class="row">
                <div class="col-sm-6">
                    <ul class="list-unstyled mb-0">
                        <li>
                            <a class="list-link" href="#">
                                <i class="far fa-search"></i>
                                <span>macbook pro</span> in Laptops
                            </a>
                        </li>
                        <li>
                            <a class="list-link" href="#">
                                <i class="far fa-search"></i>
                                <span>iphone 8</span> in Smartphones
                            </a>
                        </li>
                        <li>
                            <a class="list-link" href="#">
                                <i class="far fa-search"></i>
                                <span>macbook pro</span> in Laptops
                            </a>
                        </li>
                        <li>
                            <a class="list-link" href="#">
                                <i class="far fa-search"></i>
                                <span>beats pro solo 3</span> in Headphones
                            </a>
                        </li>
                        <li>
                            <a class="list-link" href="#">
                                <i class="far fa-search"></i>
                                <span>smasung galaxy 10</span> in Phones
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>