How to get Search Auto Suggestion and Auto completion using REST API?

Question

we are using SP 2016 Enterprise On-Premises Search application and REST API approach to get the results.

Need to achieve Auto suggestion and Auto completion as we get in native SharePoint search UI.

How do we achieve the same?

Please let me know should you need further details.

Answer 1

Try below code:

// Parse an item and create an title/value hash table with all the properties available
function getFields(results, requestUrl) {
    r = {};

    if (results != undefined) {
        if (results.Query != undefined) {
            r["Query"] = results.Query;
            r["Path"] = requestUrl + "?k=" + results.Query;
        }
        else {
            r["Query"] = results;
            r["Path"] = requestUrl + "?k=" + results;
        }
    }
    return r;
}

function autocompletefn(controlId,requestUrl)
{
    var autocomplete = $(controlId).autocomplete({
        minLength: 3,
        source: function (request, response) {
            $.ajax({
                beforeSend: function (request) {
                    request.setRequestHeader("Accept", "application/json;odata=verbose;charset=utf-8");
                },

                url: "/_api/search/suggest?querytext='" + request.term + "'&fprequerysuggestions=true",
                dataType: "json",
                success: function (data) {
                    response($.map(data.d.suggest.Queries.results, function (item) {
                        return {
                            fields: getFields(item, requestUrl)
                        }
                    }));
                },
                error: function (data) {
                    console.log('search error');
                }
            });
        },
        // Run this when the item is in focused (not selected)
        focus: function (event, ui) {

            return false;
        },
        // Run this when the item is selected
        select: function (event, ui) {
            location.href = ui.item.fields.Path;

        },
        appendTo: $('#menu-container')
    }).data("uiAutocomplete")._renderItem = function (ul, item) {
        return $("<li>").append('<a>' + item.fields.Query + '</a>')
            .appendTo(ul);
    };
}   

$(document).ready(function () {
        autocompletefn("#restSearch", "https://sitecollectionurl/Pages/Results.aspx");   
});

HTML:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<div id="menu-container">
    <input type="text" id="restSearch" />
</div>

Reference - Autocomplete using SharePoint search

Using jQuery UI autocomplete with the REST API to get search results in the search box