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)


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 …

var itemCtx = {};
    itemCtx.Templates = {};
    itemCtx.Templates.Fields = {
        // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms 
        "ContentTypeId": {
            //"View": percentCompleteViewFiledTemplate,
            //"DisplayForm": percentCompleteViewFiledTemplate,
            "NewForm": edit_autoComplete,
            "EditForm": edit_autoComplete

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:

var originalContentTypeControlId; // Global variable holding the ID of the OOTB SharePoint Content Type Dropdown Control.
$(window).load(function () {
	//Find the right control in SharePoint Edit Form
	originalContentTypeControlId = $('select[title="Content Type"]').attr("id");

	//Add the placeholder for the JQueryUI AutoComplete Control
	$("#" + originalContentTypeControlId).parent().prepend('<input id="autoCompleteControl" name="autoCompleteControl" value="" />');

	//Collect the possible options from the dropdown and store the one that is selected.
	var contentTypeValues = new Array;
	var selectedContentType;
	$("#" + originalContentTypeControlId + " > option").each(function () {
		if (this.selected) {
			selectedContentType = this.text;

	//Hide the Out-Of-The-Box dropdown
	$("#" + originalContentTypeControlId).hide();

	//Activate the AutoComplete control
		width: 200,
		source: contentTypeValues,
		select: function (event, ui) {
			var label = ui.item.label;
			var value = ui.item.value;
			//Attach the event when a user selects an option  from the AutoComplete Control

	//If a ContentType was selected before, place it also in the AutoComplete control
	if (selectedContentType) {

	//Attach the event also when a user enters a value in the AutoComplete control
	$("#autoCompleteControl").on('change', function () {

//Fired when Autocomplete option was chosen or entered, 
//so basically fire the logic behind the Out-Of-The-Box DropDown control.
function OnAutoCompleteChanged(valueSelectedOrEntered) {
    $("#" + originalContentTypeControlId + " option").filter(function() {
         return $(this).html() == valueSelectedOrEntered;
    }).prop('selected', true);
    $("#" + originalContentTypeControlId).trigger('change');

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:

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.

Leave a Reply

Your email address will not be published.

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