0151 355 4555

Ajax Company Auto-Complete

This sample demonstrates using our Business Profiles service to add an auto-complete drop down to company name fields on your website, allowing quicker and more accurate capture of company names and automated retrieval of associated business information.

For the sample to work, you must have first added the domain name of your website to your allowed list for your Ajax key.

This sample assumes you have a form on your website such as that shown below:

By adding the code below, auto-complete functionality is added to the company name field.

new data8.companyLookup(
	[
		{ element: 'company', field: 'organisation' },
		{ element: 'number', field: 'companynumber' },
		{ element: 'address1', field: 'line1' },
		{ element: 'address2', field: 'line2' },
		{ element: 'address3', field: 'line3' },
		{ element: 'city', field: 'town' },
		{ element: 'county', field: 'county' },
		{ element: 'postcode', field: 'postcode' }
	],
	{
		// Change this to your own Ajax key
		ajaxKey: 'your-ajax-key'
	}
).show();

If your using Bootstrap the following CSS will help improve the look of jQuery UI's dropdown:

ul.ui-autocomplete {
    position: absolute;
    padding-left: 5px;
    list-style: none;
    z-index: 100;
}
ul.ui-autocomplete li {
    border: 1px solid transparent;
}

Configuration

There are two main parts to the configuration of this script - the list of elements in your form that should contain the various fields from the company profile, and the options that give the script details of the Data8 account to use when performing a lookup.

The form elements that should contain the various parts of the address are listed in the first part of the script as { element: 'id', field: 'name' } pairs. Add one of these for each element in your form that contains part of the address with the element set to the ID or name of the HTML element and the field set to one of the following values:

  • organisation - the field should contain the company name. This is the element that the auto-complete functionality is added to.
  • companynumber - the field should contain the company registration number of the selected company. You can make this a hidden, required field to ensure that a company is selected from the list rather than entered as free text.
  • line1 - the field should contain the first line of the address.
  • line2 - the field should contain the second line of the address.
  • line3 - the field should contain the third line of the address.
  • line4 - the field should contain the fourth line of the address.
  • line5 - the field should contain the fifth line of the address.
  • line6 - the field should contain the sixth line of the address.
  • town - the field should contain the town name.
  • county - the field should contain the county name.
  • postcode - the field should contain the postcode.
  • country - the field should contain the country.

You must specify an element for at least the organisation field, and you can also include as many or as few of the other fields as you like.

There are a number of options that control the details of how this script works. All these options are passed in as part of the second parameter to the data8.companyLookup constructor.

  • ajaxKey - your Data8 Ajax key
  • expectedCountry - the value that a country drop-down list must have before the auto-complete functionality is applied

Dependencies

For this script to work you must also include the following scripts in your page:

Getting more control

You can override many of the details of how the company auto-complete script works to take fine control, for example: