Creating an Autocomplete Client-side Rendering (CSR) Template

I’m going to do one more CSR Template that doesn’t really render anything, but rather changes something that SPClientTemplates actually renders, an autocomplete template. This one is a little less invasive, because it also doesn’t override the render method, so it doesn’t have to call the out of box renderer and be aware of the consequences of doing that. It can do that because it only cares about a single field, the one it’s going to modify, so it can safely do it’s work as soon as that field is rendered. That means that it can just override OnPreRender and OnPostRender.


This post is part of a series on Client Side Rendering:
 
  1. Overview of SharePoint Client Side Rendering (CSR)
  2. Creating Cascading Lookups with SharePoint Client Side Rendering (CSR)
  3. Setting the JSLink Property of a Field Using JavaScript
  4. Creating an Autocomplete Client-side Rendering (CSR) Template
  5. Dynamic CSR (Client-side Rendering) Templates
  6. A Full-Fledged Client-side Rendering (CSR) Template, a Rating Field
  7. Tabbed Forms with Client-side Rendering (CSR)
  8. An Accordion View, Custom List View Display Templates (CSR)
  9. CSR on Steroids and the Amazing Technicolor Text Boxes

Autocomplete Setup

The setup for this is that I’m going to add two fields to my list, Company and JobTitle. I would like jQuery UI autocomplete functionality added to each of these fields with the data read from the lists Companies and JobTitles respectively. The two lists look like this:

Lookup Lists

So when I fill out the form and start typing in a job title, the form should suggest autocomplete values based on what’s in the JobTitles lists like so (and of course the same for Company and Companies):

Job Title with Autocomplete

Autocomplete Implementation

So here is the code:

A few items of interest in no particular order:
 
  • The field configuration at the top should now look vaguely familiar, and follows the conventions I established while doing the cascading lookups template in a previous post. It doesn’t need as much template-specific configuration, just a list and a field in that list from which it’s going to read it’s autocomplete data.
  • The pre-render method just brings in the jquery-ui.css file. But remember that OnPreRender gets called back for each field in the form, and we don’t want to add that css link 5, or 10, or more times depending on how many fields are in the form. So it just uses a flag defined outside itself to ensure it only inserts the link once.
  • The post-render method does the heavy lifting. It first needs to check is this field an autocomplete field (because again, it’s going to get called for every field). If so, it finds it’s config, formulates a query based on that, and calls the Lists.asmx web service with that query. On success, it loads the results into an array and calls jquery ui’s autocomplete method on the input field.
  • Finally, the overrides object is quite a bit simpler, because I’m only overriding OnPreRender and OnPostRender, and they aren’t field specific so I don’t even need to look at my configuration to build the overrides object.

Wrap-up

In my next post I’m going to show an even better utility page for deploying Client Side Rendering templates.
 
AutocompleteCSR.zip – the source code for this post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top