In last few days I found an excellent JQuery extension specifically designed for SharePoint allowing you to add autocomplete on your list item forms in very short time.
One application where you could use that, is when you have a cloud hosted solution and can’t deploy web services or components required to perform autocomplete operations. Let’s take a look at this approach.
I assume you’re using default Team Site template, in my case http://intranet.contoso.com, although, there is no difference whether we’re using collaboration or publishing site template when it comes to this customization. Let’s open the Team Discussions list from the quick launch. When you click Add new discussion link – we get a form which allows us to add a new discussion topic. Let’s enhance this functionality so that new discussion Subject line will autocomplete from the Title in the Announcememts list also located in this site.
1. While in Team Discussions list (http://intranet.contoso.com/Lists/Team Discussion/AllItems.aspx), edit the AllItems.aspx in URL and replace it with NewForm.aspx. This is the new discussion form but in this view we can modify this page and add new web parts rather than just open a modal.
2. Click Site Actions -> Edit Page to edit the New Discussion page.
3. In the Main web part zone, click Add a Web Part, add Content Editor .
4. The web part we added will contain content we’ll enter in it. In our case we’ll add JavaScript to it which will manipulate the form below.
5. When the Content Editor is added to the page click Click here to add new content. Then, from the ribbon, under Markup group, pick HTML flyout and select Edit HTML source.
6. The modal will open for you to edit the source of the web part. Enter the following HTML:
<script language="javascript" src="/SiteAssets/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" src="/SiteAssets/jquery.SPServices-0.5.8P1.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function()
{
$().SPServices.SPAutocomplete(
{
sourceList: "Announcements",
sourceColumn: "Title",
columnName: "Subject",
ignoreCase: true,
numChars: 3,
slideDownSpeed: 100,
debug: true})
;});
</script>
Above we reference JQuery library and community extension for SharePoint which I will explain how to download in a moment. Then we call one of the methods in the community extension to which will connect to the Announcements list and use the Title of the announcement to allow autocomplete of the Subject column in our Team Disucssion.
7. Click OK and on the ribbon Page tab, click Stop Editing.
8. Let’s add all of the referenced libraries:
jquery-1.4.2.min.js – can be downloaded from here: http://code.jquery.com/jquery-1.4.2.min.js . Alternatively you can search for the file name and you will get one of the versions widely available for download. Keep in mind that version you might be downloading now that you read this book might be higer than when I’m writing it right now.
jquery.SPServices-0.5.8P1.min.js – can be downloaded from here: http://spservices.codeplex.com/SourceControl/list/changesets
9. Upload them both to the Site Assets library on the Contoso Intranet site (http://intranet.contoso.com/SiteAssets/Forms/AllItems.aspx)
10. Now, that all of the components are in place let’s test the functionality. Open the Team Discussions library and click Add new discussion. Start typing the Subject of the discussion and after 3 leters you will get a autocomplete suggestion for the item which exists in the announcements library.
Enjoy!
