How to Add Autocomplete Functionality to CRM 2011 Fields

Gayan Perera, 20 February 2013

This is an unsupported customization.

To implement the autocomplete functionality you’ll need the following:

1. jQuery (latest version)
2. jQuery Autocomplete
3. A custom javascript web resource – See code below
4. A custom css web resource – This will allow us to control the look of the autocomplete dropdown/option list

First start by adding jQuery and jQuery Autocomplete as web resources into your CRM 2011 instance. Then create a new javascript web resource, copy/paste and modify the code below (See inline comments).

// to ensure we keep the autocomplete style similar to crm 2011 we'll inject it dynamically onto the page
$(document).ready(function () {
    var headID = document.getElementsByTagName("head")[0];
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = '../WebResources/mag_/css/your.css';
    cssNode.media = 'all';
    headID.appendChild(cssNode);
});

var xyz = {};

xyz.search = function (control) {
    // we'll hook directly into the field on the crm 2011 form. eg: new_somefield 
    $("#" + control).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http(s)://your.web.service.com",
                // jsonp will allow you to make cross domain calls 
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 10,
                    search: request.term
                },
                success: function (data) {
                    response($.map(data.Data, function (item) {
                        return {
                            // change these to match your values 
                            label: item.DisplayValue,
                            value: item
                        }
                    }));
                }
            });
        },
        // wait for N characters before making the call to the above url 
        minLength: 2,
        // this is called when a user selects an item from the list 
        select: function (event, ui) {
            if (ui != null && ui.item != null) {
            }
        },
        // this makes the field/textbox look consistent with other crm fields 
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
};

Now open up the entity form that you want this functionality in, add all 3 libraries to the form. Then in the OnLoad event of the form call “xyz.search(“new_somefield”)”.