How to Add Autocomplete Functionality to CRM 2011 Fields

Gayan Perera, 20 February 2013

How to Add Autocomplete Functionality to CRM 2011 Fields 

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'; = 'all';

var xyz = {}; = function (control) {
    // we'll hook directly into the field on the crm 2011 form. eg: new_somefield 
    $("#" + control).autocomplete({
        source: function (request, response) {
                url: "http(s)://",
                // 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 () {
        close: function () {

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 ““new_somefield”)”.