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