SharePoint 2013 comes with a beautiful REST API that supports both search and suggestions. In this post I’ll show how to easily integrate search results into the search box to quickly show the users the results they want.
The example shows normal search results, but it could easily be changed to show e.g. products from a product search demo like Contoso Electronics.
I start with a very simple html page, which includes jQuery and jQueryUI from the jquery CDN.
The input-box with ID restSearch will be referenced later in my script restSearch.js, as well as the div tag with ID menu-container.
The script restSearch.js uses ajax to do a search against the REST API:
This is more or less out of the box jQueryUI-autocomplete magic. The first function getFields parses the JSON result item in to a key/value dictionary which makes all the managed properties easily available. The $.ajax function executes the query against the REST API and gets a result set in JSON back.There is a select function that will redirect the user direct to the result when selecting a hit. At the end there is some custom formatting of the autocomplete entries to show the document format icon in the list.
It ends up looking like this:
I’veattached the script file, just put them somewhere on your SharePoint and it will work fine.