How to get Search Auto Suggestion and Auto completion using REST API?
-
13-12-2020 - |
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.
La solution
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
Licencié sous: CC-BY-SA avec attribution
Non affilié à sharepoint.stackexchange