Friday, May 23, 2014

Autocomplete using SPServices with JQuery

Share/Save/Bookmark

Call it auto suggestion or type ahead or auto complete, its pretty similar that im trying to achieve here in SharePoint using SPServices API with JQuery.
Get your copy of SPServices js from http://spservices.codeplex.com/ and have it in a library or layouts folder so it can be referenced in the script that we gonna write.

Here, im implementing a sharepoint site page that has a custom filter option that will allow user to filter the data in mulitple listviewwebpart added to the same page.Sometime names may sound same but spell different, so i want to give auto suggestions when user starts typing the text in filter textbox.

$(document).ready(function(){
 $().SPServices.SPAutocomplete({
     sourceList:"Employee list",
     sourceColumn: "FullName", // SPField name from which data will be pulled using lists webservice
     columnName:"FilterByName", // either sp field name if using on list form or input field control title attribute
     ignoreCase:true,
     numChars:3, //autocomplete shows when there is a minimum of 3 char in the textbox of the field/control
     slideDownSpeed: 1000,
  });
});

Once value is set in filtertexbox  and submitted i have an additional script that appends the querystring FilterField1=fileldname&FilterValue1=value that will filters the data in multiple list webparts.

SPServices made developers job easy when it comes to writing client side code. Ofcourse, you can achieve the same thing by writing your own code from scratch with a jquery ajax request to sharepoint lists webservice and bind results with textbox.
Im hoping SPServices will introduce a way to find the input control not just by 'Title' but also by name/id because some sharepoint input controls(may not be list forms) will not have title attribute set.


Subscribe

2 comments: