SharePoint 2013 JQuery AutoComplete instead of ContentType Dropdown

On a project we want the user to select a Content Type from a list of 70 possible values. With the out-of-the-box approach, the ContentType dropdown would become very large.

What would be ideal is an auto-complete list (JQueryUI AutoComplete Demo)

Result:
2014-08-19_123010

Luckily in SharePoint 2013 you have the possibility to perform CSR with JavaScript, also called JSLink. Since the Content Type field is very special inside SharePoint (has even a special ContentTypeId fieldtype for it), I was unable to override the field rendering with the normal JSLink approach. So I used the force of PowerShell instead to tweak it …

So the following didn’t get my anywhere …

Instead I used PowerShell to:

  1. Find & Hide the dropdown control
  2. Add & Fill the autocomplete control based on the options of the hidden dropdown control
  3. Execute the change event on the dropdown if a user selects or changes something in the autocomplete control.

Find the steps here:

You can download the JS File here:

Of course to be referenced in the New & EditForm page, and modifying the SharePoint WebPart Properties:

  • Go the the EditForm
  • Edit the WebPart Properties:
    2014-08-19_134230

Some notes:

  • Of course this is a POC, in production scenario’s you would perform more checks:
    • Can the Dropdown be found? if not don’t continue
    • Use Try – Catches, if something fails make the OOTB dropdown visible again
  • For future use it might be that Microsoft changes the way the Content Type choice is rendered. So this changes should be noted down in a test-document when performing Pre-Upgrade test.

2 thoughts on “SharePoint 2013 JQuery AutoComplete instead of ContentType Dropdown

  1. This is a nice little UI change that ought to improve the overall UX of the form. If you know anything about me, you know that I’m passionate about the importance of these little tweaks to make SharePoint more usable. If only Microsoft watched these little things we do to improve the form UIs…

    I don’t think it’ll make any real difference to the performance, but once you find an element in the page, like so:

    originalContentTypeControl = $(‘select[title=”Content Type”]’);

    You can then manipulate it anytime later using that reference:

    originalContentTypeControl.hide();

    without having to find it in the DOM again.

    And you said it was PowerShell. 🙂

    M.

  2. True True! 🙂
    I also like to find small but noticable improvements in code during a peer review. So I’m happy about your remark Marc 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

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