Auto Complete/Suggestion in SharePoint 2010 Search Text box with jQuery- Part 1

Can’t get myself out of exploring jQuery in SharePoint. Last week I was working on how to bring in the Google kind of auto suggestion/complete functionality in to SharePoint 2010 Search text box using jQuery. I will be explaining it in 2 parts on how to achieve this functionality.

UPDATE: I have published this application here in CodePlex as well  as blogged about it briefly over here about the functionality as well as the deployment steps. Check it out if you do not want to get in to the coding side.

Part 1: How to give the Auto suggestion/complete functionality to the Search box with search terms retrieved from a SharePoint list. (You shall use the code implemented here if you want to store the search suggestion content in the SharePoint list by yourself)

Part 2: How to store the users’ searched queries to a SharePoint list dynamically and then show them as suggestions in the search box while searching.

Let me cover the first part in this blog post:

I have used jQuery and the jQuery Autocomplete plug-in to show the suggestion in the search text box.

1. Download the jQuery plug-in form here

2. Download the  jQuery UI plug-in from here.

Note: We need only the Autocomplete functionality of the jQuery UI. So you need to have only the following options selected in the list of functionalities shown in the above URL before downloading:

  • Core
  • Widget
  • Mouse
  • Position
  • Autocomplete
  • Menu

3. Create a folder called SPAutoSuggestion in the Layouts folder.

4. Unzip the above download zip files. Copy all the JS files(not the folders) in to the above created folder.

5. Create a Custom list called “Search Keywords” in your SharePoint Enterprise Search centre site and add some list items in to the list with sample keywords that you would like to appear as suggestions in the Search text box.

4. Open the home page of your Search site. Go to Site Actions and click Edit page to edit the page.

5. Click on Add a Web Part above the Search box and add a Content Editor Web Part as shown below.

6. After adding the web part, click below the web part in order to edit the HTML source as shown in the below figure to open the content editor of the web part.

7. In the content editor add the below script tags referring the jQuery plugins:

<script type="text/javascript" src="/_layouts/SPAutoSuggestion /jquery-1.9.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.core.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.widget.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.position.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.autocomplete.js"></script>
<link href="/_layouts/SPAutoSuggestion/jquery-ui.CSS" rel="stylesheet" type="text/css"/>

Note: You may have to change the jQuery version number in the first line based on the jQuery version that you download also make sure the all the files referred are their in the correct path.

8. Now let us start writing the JavaScript code. This JS code will  retrieve the keywords to be suggested from the Search Keywords list through ECMA script Client Object Model and store it in an array.

<script type="text/javascript">
JSRequest.EnsureSetup();
//declare the variable that are going to be used though out the code

var clientContext;
var oList;
var camlQuery;
var listItemInfo=’‘;
var listItemEnumerator;

$(document).ready(function () //executes the function inside after the page finishes loading completely
{
// loads the sp.js file that contains the client object model script and then executes the Post_COM_Load function.
ExecuteOrDelayUntilScriptLoaded(Post_COM_Load, "sp.js");
});

9. Below function is the Post_COM_Load function which retrieves the keywords from the Search Keywords list.

function Post_COM_Load() {
//gets the context of the current site which is our Search center
clientContext = new SP.ClientContext.get_current();
//gets the list by title 'Search Keywords' where we have stored all the keywords
oList = clientContext.get_web().get_lists().getByTitle('Search Keywords');

//camlQuery variable will store the CAML query using which we would retrieve the keywords from the list.
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View/>');
//collListItem will store the list items retrieved form the Search Keywords list.
this.collListItem = oList.getItems(camlQuery);
//populate the collListItem with values from the Title column in the Search Keywords list.
clientContext.load(collListItem, 'Include(Title)');

//execute the onQuerySucceeded function if data gets loaded successfully and execute the onQueryFailed if it failed to load the data
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

10.  Add the below script for onQuerySucceeded.

function onQuerySucceeded(sender, args) {
listItemEnumerator = collListItem.getEnumerator();
//looping through collListItem list item collection and storing each value into an array called listItemInfo separated by a comma
while (listItemEnumerator.moveNext()) {
oListItem = listItemEnumerator.get_current();
listItemInfo +=
',' + oListItem.get_item('Title');
}

//bind the Autocomplete functionality to an search textbox whose class name is .ms-sbplain by passing the array as the parameter.
$(".ms-sbplain").autocomplete({
source: listItemInfo.split(",")
});
}
11. Add the below script for onQueryFailed function
function onQueryFailed(sender, args) {
//when the request to load the has failed the error message will be displayed in an alert.
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

12. Click OK in the content editor and click Save & Close in the top ribbon.

13. Now, when you start typing in the search text box, the suggestions would appear from the Search keywords list based on what you are typing as shown below.

Here is the complete code without any comments:

<script src="/_layouts/SPAutoSuggestion/jquery-1.7.js" type="text/javascript"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.core.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.widget.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.position.js"></script>
<script src="/_layouts/SPAutoSuggestion/jquery.ui.autocomplete.js"></script>
<link href="/_layouts/SPAutoSuggestion/jquery-ui.CSS" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
JSRequest.EnsureSetup();

var clientContext;
var oList;
var camlQuery;
var listItemInfo='';
var listItemEnumerator;

$(document).ready(function()
{
ExecuteOrDelayUntilScriptLoaded(Post_COM_Load,"sp.js")
});

function Post_COM_Load(){
clientContext = new SP.ClientContext.get_current();
oList = clientContext.get_web().get_lists().getByTitle('Search Keywords');
camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View/>');
this.collListItem=oList.getItems(camlQuery);
clientContext.load(collListItem,'Include(Title)');
clientContext.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded),
Function.createDelegate(this,this.onQueryFailed))
}

function onQuerySucceeded(sender,args){
var listItemEnumerator = collListItem.getEnumerator();
while(listItemEnumerator.moveNext()){
oListItem = listItemEnumerator.get_current();
listItemInfo+=','+oListItem.get_item('Title')}
$(".ms-sbplain").autocomplete({source:listItemInfo.split(",")})
}
function onQueryFailed(sender,args){
alert('Request failed. '+args.get_message()+'\n'+args.get_stackTrace())
}
</script>

Advertisements

17 thoughts on “Auto Complete/Suggestion in SharePoint 2010 Search Text box with jQuery- Part 1

  1. In the above code I’m accessing the search text box by it’s class like this: $(“.ms-sbplain”).autocomplete

  2. is there any steps you might have left out? the script seems to work up until the point where it loads the array string. but the binding just does not happen. it doesnt seem to step into the autocomplete method?

    is there more detail that you can provide to resolve this? im new to this so it will be much appreciated.

  3. This is a very interesting solution, but I’m afraid I cannot get it to work. Note that there are some differences in the paths in the complete code sample from the commented snippets (extra autocomplete.js, unrequired folders “jquery-ui-1.9m6/jquery-ui-1.9m6/” for the CSS) plus JQuery had moved on to jquery-1.7.1.min.js when I downloaded it.

    Even with those changes, and debugging in Google Chrome, I am getting the errors:

    Uncaught TypeError: Object [object Object] has no method ‘menu’ in jquery.ui.autocomplete.js:209
    Uncaught TypeError: Cannot read property ‘element’ of undefined in jquery.ui.autocomplete.js:381

  4. Hi Abdurahman,

    Are you trying to bind the array to SharePoint search text box or to some other text box?? If so, please look at the class name of that text box and specify that class name in this line of code: $(“.ms-sbplain”).autocomplete.

  5. Magnificent web site. Lots of useful info here. I’m sending it to a few pals ans additionally sharing in delicious. And obviously, thank you to your effort!

  6. Basically a realy cool thing! But sorry, cant bring it up on SharePoint 2010 Standard Enterprise Search Center. Got the following error in IE9 Script Debugging:

    SCRIPT5007: Unable to get value of the property ‘element’: object is null or undefined

    I have created the list correctly, otherwise you get an error
    JQuery is working, but it seems that autocompleter can not get the values from the textbox. I didnt change the class of the searchbox, I see that this is used to reference the field.

    Do you have any inputs for me? Thanks in advance, Michael

  7. Can u try from some other browser like Mozilla Firefox and check if u r still getting the error? Also pls check the jQuery version that u r using and the jQuery version that u r referring in your script.

  8. Hi , it’s really an impressing solution but unfortunately it didn’t work for me . i created an application page and i followed all the steps but it did not work. i could retrieve the list item of a custom list with JS in the past without any problems. i just called this list (listItemInfo) in :$(“#tags”).autocomplete({
    source: listItemInfo
    });

    Tags:

    can anyone please help me and thanks in advanced.

    • SP 2013 has it’s own OOTB feature to support auto suggestions in SP search.I would advice to read more about tht!!

      • The OOTB feature doesn’t work for anonymous users. so to implement for anonymous users i am using your technic. so could you tell me what modification i need to do to use it in sp2013 publishing template. Thanks !

    • You need to edit the OOTB OSSSearchResults.aspx page that is present in the layouts folder and add the auto complete code. Not a recommended approach though.

  9. Pingback: Fix Position.js Errors - Windows XP, Vista, 7 & 8

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s