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 …

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
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

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;
		}
		contentTypeValues.push(this.text);
	});

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

	//Activate the AutoComplete control
	$("#autoCompleteControl").autocomplete({
		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
			OnAutoCompleteChanged(value); 
		}
	});

	//If a ContentType was selected before, place it also in the AutoComplete control
	if (selectedContentType) {
		$("#autoCompleteControl").val(selectedContentType);
	}

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

//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:
    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.

Leave a Reply

Your email address will not be published.

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