Skip to content

Creating a custom autocomplete search list

This guide helps your organisation set up a filtered list of existing records with extra details (like a street address) so your team can easily identify and choose the right person from a dropdown list.

For example, you organize an event and you only want to assign certain activities to a contact who has the Volunteer subtype.

In the dropdown, you want to have the name and extra fields (street and city) to help users choose the correct volunteer from the list.

Create your search list

  1. Navigate to Search in your main CiviCRM menu and click on SearchKit.
  2. Click the New Search button to start building your custom list.
  3. In the Search for field, choose Contact (or another specific record type you need to display, such as volunteers).
  4. Use the Where section to apply filters if you only want specific people to appear in your final list, such as filtering by availability, age, or group membership.

Set up the autocomplete display

  1. Click the + Add button on the left-hand side and choose Autocomplete from the options.
  2. Place your main searchable field - usually the contact's name - as the very first field in the list layout.
  3. Add any extra informative fields right below it, such as Street Address and City. These details will appear alongside the name in the dropdown to help your team tell apart individuals with similar names.
  4. Select an Ascending sort order for the contact name field so your list appears in alphabetical order.
  5. Give your autocomplete display a clear name and save your progress.

Adding the autocomplete field to a form

Once you've created the custom autocomplete list in SearchKit, you can now embed it directly into a form using FormBuilder.

Add the contact field to your form

  1. Open your desired form layout inside FormBuilder.
  2. Locate the Existing Contact field in the available fields panel under Add in the left-hand panel.
  3. Click and drag the Existing Contact field onto your form canvas exactly where you want users to see it.

Connect your custom autocomplete list

  1. Click on the settings wheel for the Existing Contact field on your form canvas to open its properties panel.
  2. If relevant, change the Type to Autocomplete.
  3. Under the Saved Search drop-down, select the custom search list and autocomplete display that you created previously.

Configure your field settings

  1. Check the Required box if your team must select a record before they can successfully submit the form.
  2. Turn on the Auto-open option so that the dropdown list expands automatically as soon as someone clicks inside the field.
  3. Choose the appropriate permission type for your form:
  4. Choose Form-based for most standard administrative forms where anyone filling out the form should be able to see the full list of options.
  5. Choose User-based if your organisation uses Access Control Lists (ACLs) to strictly limit which contacts certain staff members are allowed to view based on their user accounts.
  6. Save your form changes.

Your form is now ready to use, providing an easy and accurate way to select records.