It is more or less frontend implementation of suggestion-engine like https://twitter.github.io/typeahead.js/ via classic search function placed in surfaceController api:

Umbraco.Cms.Core.IPublishedContentQuery publishedContentQuery
var results = publishedContentQuery.Search(searchQuery);

So, you move this command to the api (aka surface controller) and sending the typed string to it. The api then searches for you by content and returns, for example, json results with links to pages that you then display in the dropdown.

You can do this without js library, for example like this (mc.Search() is the call to api)

<div class="my-search container-xxl">
    <input type="text" class="form-control search-input border-0" id="search-input" placeholder="Search..." autocomplete="off" spellcheck="false" ng-model="mc.search" ng-model-options="{ debounce: 1000 }" ng-change="mc.Search()">
    <div ng-if="(mc.search.length >= 3) ? 'show': ''" class="dropdown-menu px-3 py-0 my-mega-menu overflow-auto scrollable-container show" ng-cloak>
        <div class="row row-bordered">
            <div class="col my-mega-menu-block p-3">
                <div class="d-block mega-dropdown-link">Results</div>
                <ul ng-show="mc.searchResults.length > 0">
                    <li ng-repeat="src in mc.searchResults">
                        <a href="javascript:;" ng-click="mc.linkTo(src.id);mc.HideSearch()" class="text-muted">{{ src.name }}</a>
                    </li>
                </ul>
                <div ng-hide="mc.searchResults.length > 0" class="d-block mega-dropdown-link">
                    <span class="text-muted">No results</span>
                </div>
            </div>
        </div>
    </div>
</div>

(watch out for debounce so you don't mess up the api)

Regards

is working on a reply...