0

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.

  • 1
    Use the /_api/search/suggest end point for suggestions. There are quite a few blogs on using JQuery UI Auto complete. Have a google. – Bunzab Jan 27 '17 at 13:15
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.