Autocomplete on Sharepoint DropDownList Column

I am merely writing this for my personal reference.

In an effort to incorporate a SharePoint Lookup Column appearing as a DropDownList it became imperative to think about presenting large amounts of selections to end users and how they would interact with it.

In terms of usability, it just was not an option.

Although, there are a host of options available for creating a AutoComplete behavior this includes; CustomFields, Third Party Features, etc. However, I wanted a simple yet effective solution without breaking alot of sweat.

To begin with head over to the following sources and download these files:

jquery-1.8.3.min.js @ http://jquery.com/download/
jquery.SPServices-0.7.2.js @ http://spservices.codeplex.com
jquery.SPServices-0.7.2.min.js @ http://spservices.codeplex.com

Once you have downloaded the above, Create a Document Library in desired SharePoint Site where you would like to implement AutoComplete behaviour. Now, add The jquery files to the Document Library created.

Now just above your ListView (allitems.aspx or whateverview.aspx) Add a new Content Editor WebPart on the page using Site Actions > Edit Page option. From the Ribbon locate Markup and pointing inside the CEWP select HTML > Edit HTML Source. Now add the following –

<script type="text/javascript" src="../DOCUMENTLIBRARYNAME/jquery.SP.Services-0.7.2.js"></script>
<script type="text/javascript" src="../DOCUMENTLIBRARYNAME/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$().SPServices.SPAutoComplete({
sourceList: "NAME OF LIST",
sourceColumn: "NAME OF COLUMN THAT WILL BE SHOWN",
columnName: "NAME OF COLUMN THAT WILL BOUND",
numChars: 3,
ignoreCase: true,
slideDownSpeed: 200,
debug: false
});
});
</script>

Now, hopefully you should your DropDownList with (NONE) editable and pulling back the LookUp Column you attached your Column to. For adding SharePoint GetListItems() follow the link below.

http://eikden.net/2011/05/19/sp-servicesjquerygetlistitems-for-sharepoint-web-services/

References:

Anita (2010) http://www.itidea.nl/index.php/jquery-spservices-and-autocomplete/
Marc D. Anderson (2011) http://sympmarc.com/2011/08/24/using-spservices-with-jqueryuis-autocomplete-function-on-infopath-forms-in-sharepoint/

Advertisements

2 thoughts on “Autocomplete on Sharepoint DropDownList Column

    • Thank you so much for taking time to point this out Marc. Your blog has been my bookmark and a brilliant source of learning SharePoint for as long as I can remember. I aspire to write and contribute like you some day. Wishing you a Happy New Year 2013.

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