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">
        <div class="omnisearch-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 data-feather="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 data-feather="clock"></i>
                                    <span>macbook pro</span> in Laptops
                                </a>
                            </li>
                            <li>
                                <a class="list-link" href="#">
                                    <i data-feather="clock"></i>
                                    <span>iphone 8</span> in Smartphones
                                </a>
                            </li>
                            <li>
                                <a class="list-link" href="#">
                                    <i data-feather="clock"></i>
                                    <span>macbook pro</span> in Laptops
                                </a>
                            </li>
                            <li>
                                <a class="list-link" href="#">
                                    <i data-feather="clock"></i>
                                    <span>beats pro solo 3</span> in Headphones
                                </a>
                            </li>
                            <li>
                                <a class="list-link" href="#">
                                    <i data-feather="clock"></i>
                                    <span>smasung galaxy 10</span> in Phones
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>