# 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.

Show code

    <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.

###### Search Suggestions

- macbook pro in Laptops
- iphone 8 in Smartphones
- macbook pro in Laptops
- beats pro solo 3 in Headphones
- smasung galaxy 10 in Phones

    <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>