Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with Content editor web part before. You need to create 2 CEWPs, one for search home page and the other for the search results
page. I have explained the deployment process through the below steps:
Deployment process:
- Download the SPAutosuggestion.zip file and unzip it.
- Create a folder called SPAutosuggestion under the layouts folder of your SharePoint server.
- Copy the files jquery-1.7.js, jquery.ui.autocomplete.js, jquery.ui.core.js, jquery.ui.complete.js, jquery.ui.widget.js, and jquery-ui.CSS from the unzipped folder in to the above create folder.
- Go to your SharePoint search site and create a list called “Search Keywords”
- Go the search home page and edit the page.
- Add a Content editor web part in to the page.
- Click on “Click here to add new content” as shown in the below image:
- Now in the ribbon control click on HTML -> Edit HTML Source as shown below:
- In the HTML source editor window copy the content of the AutoSuggectionLandPage.js which would be present in the folder unzipped in step 1.
- Click on “Save & Close” under the page tab in the top ribbon.
- Go to the search results page of you SharePoint site and edit it.
- Repeat step 6 to 10. But instead of copying the content of AutoSuggectionLandPage.js, copy the content of AutoSuggestionResultsPage.js.
- Search with different queries twice or thrice to see them getting suggested as you type in the search text box.