Query suggestions in SP 2013 Using Rest API (/_api/search/suggest)
Below are the dependency files
1. Jquery UI : http://code.jquery.com/ui/1.10.0/jquery-ui.js
2. Jquery AutoComplete CSS:
http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css
http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css
3. JQuery: http://code.jquery.com/jquery-1.8.3.js
Query Suggestion Parameter: Here is the post http://blogs.msdn.com/b/nadeemis/archive/2012/08/24/sharepoint-2013-search-rest-api.aspx that specified the detail query suggestions parameter list.
Implementation:
I have two vertical examples.
Get / copy the below code and paste in your script editor web part.
3. JQuery: http://code.jquery.com/jquery-1.8.3.js
Query Suggestion Parameter: Here is the post http://blogs.msdn.com/b/nadeemis/archive/2012/08/24/sharepoint-2013-search-rest-api.aspx that specified the detail query suggestions parameter list.
Implementation:
I have two vertical examples.
1. People VerticalI wanted to display the query suggestions on TeamSite pages although my search is configured in one of our serach center, so when user search for a particular term and it contains in the search query completion list the rest query get the result form the search center and based on the Jquery autocomplete plugin the results render to the UI. So below is the code snippet.
2. Everything Vertical
Get / copy the below code and paste in your script editor web part.
People and everything
Query suggestion
<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/ui/1.10.0/jquery-ui.js"></script>
<script
src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
// 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, isPeople)
{
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&showpeoplenamesuggestions=" + isPeople,
dataType: "json",
success: function (data) {
if (isPeople=="true") {
response($.map(data.d.suggest.PeopleNames.results,
function (item)
{
return {
fields:
getFields(item, requestUrl)
}
}));
} else {
response($.map(data.d.suggest.Queries.results, function (item) {
return {
fields:
getFields(item, requestUrl)
}
}));
}
},
error: function (data) {
alert('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", "http://Sharepointfordeveloper.com/Search/Pages/Results.aspx", "false"); });
autocompletefn("#People", "http://Sharepointfordeveloper.com/Search/Pages/Peoples.aspx", "true"); });
</script>
<table>
<tbody>
<tr>
<td>Everything Search:</td>
<td>
<div id="menu-container" style="width:600px">
<input type="text" id="restSearch" size="50" />
</div>
</td>
</tr>
<tr>
<td>People Search:</td>
<td>
<div id="menu-container" style="width:600px">
<input type="text" id="People" size="50" />
</div>
</td>
</tr>
</tbody>
</table>
"/_api/search/suggest Rest Service responsible for returning query
suggestions response. Below are the list of parameters that I used.
Name
|
Description
|
Type
|
Default
|
querytext
|
The text of the
search query.
|
String
|
Empty
|
http://host/site/_api/search/suggest?querytext='nad'
|
|||
fprequerysuggestions
|
Specifies whether
to retrieve pre-query suggestions or post-query suggestions.
|
bool
|
False
|
http://host/site/_api/search/suggest?querytext='nad'&fprequerysuggestions=true
|
|||
showpeoplenamesuggestions
|
Specifies if
people names should be included in query suggestions.
|
bool
|
False
|
http://host/site/_api/search/suggest?querytext='nad'&showpeoplenamesuggestions=true
|
|||
Comments
Post a Comment