Monday, 26 May 2014

Elevate your search experience: an Auto-complete search box

In this post I will explain how to elevate the search experience for your intranet or public faced website by replacing the Out of the box search control. 
The main component of the new autocomplete search  control are:  
  1. Search scope definition List: a custom list definition represents the search scope custom definition and a list instance of this list definition. 
  1. Empty element.xml file contains the necessary code to replace the  search delegate control replacement. 
  1. Custom user control holds the search autocomplete  logic , the control utilizes the Search RESTful APIs and execute an XHR calls to the search WCF service. 

The site owner will deploy the solution and will start populate the search definition by adding new items to the search definition list instance , the list definition will contain label (definition Title) and search definition. The search definition in fact is the RESTful call query string parameters. 
First let's create an empty farm solution 


Then add new List definition to the empty solution, name the list Search Definitions
Add new site column element to your empty solution to add your custom columns (Search definition and ScopeOrder)

Add the new field in the custom column elements.xml as below 
    Add the newly created fields to your Custom List definition as below:

after finalizing the custom list definition let's add the second main component which is the empty element file contains the search delegate control replacement.
Then add a new custom user control 

The user control consists of two components  dropdown list and a textbox  when the page loaded for the first time the control loads the predefined search scopes in a dropdown list and as the user start types a JavaScript code utilizing the client object model getting the scope definition and inject the user input string and execute an ajax call to the RESTful api at the end point
http://sitecollecitonUrl/_api/search/query

The control append the definition (which is the query string parameters ) to the above URL and render the search results
Example of the search definition


as you can see the first search definition search without limiting the results to any scope or content type, however the second one is limiting the results only to people using the SourceID parameter.
The third is trying to find the query only in the pages with type "NewsPage" which is a custom content type I've already created before

here is how the control looks like 


For complete source code please download the code at http://code.msdn.microsoft.com/Elevate-your-search-02fc9030




Related Articles

0 comments:

Post a Comment