I have a view created that has Organisation Name and a contacts Display name shown.

Now I want to be able to use auto-complete/ajax to enable the end user to filter by Organisation Name. This helps the end users not having to remember the exact name of an Organisation. In the future we will have 50+ organisations in the system.

At the moment my only other choice it to initially manually add all the organisations to the filter and use a drop-down. But as more organisations come on board, this will soon end up unmanageable.

To add more clarity to my VIEW setup


CiviCRM Contacts: CiviCRM Relationship (starting from contact A)
(CiviCRM Relationship (starting from contact A)) CiviCRM Relationships: Contact ID B


CiviCRM Contacts: Organization Name (Organization Name)
(CiviCRM Contact B) CiviCRM Contacts: Display Name (Display Name)


CiviCRM Contacts: Display Name (exposed)

This gives results (shown in a table) with Orgnisation Name in left column and Contacts Name in right column.

But no matter how I change the filter properties (apart from changing it from Single to Grouped and typing in the Organisation names to produce a drop-down) it has the issues described above.

3 Answers 3


I did a similar auto-complete feature on a Civicrm-based view with 'Search Autocomplete' https://www.drupal.org/project/search_autocomplete. I liked that you can filter the data shown in the autocomplete list with a view, so you can filter to items related to the user.

I made a view 'search_name_or_email' based on CiviCRM Contact with

  • among other fields
    • 'contact ID', 'sort name', 'email address',
    • a custom text field named 'autocomplete text' that contains '[[id]] [sort_name] :: [email]'
    • a 'CiviCRM Contacts: Text Link' that points to the contact page
  • exposed filter Operator 'Contains'
  • 'Choose fields to combine for filtering': 'name' and 'email address'
  • in 'More' the 'Filter identifier' is 'term' (this one was important)
  • (here add more fields and filters according to what you want to display and list, by example filter on Contact type for Organizations only)

the view format is 'Autocomplete JSON' with

  • group fields by: 'Contact ID'
  • input label: 'Contact ID'
  • input Link: 'Text Link'
  • Ouput Field: 'Autocomplete Text'

The view is limited to 10 items. Path: '/contact-id-autocomplete'

I made another display on the same view
that has input label 'Name' instead of 'Contact ID'
so when we click on the autocomplete list it fills the field with the contact name rather than the ID.
Path: '/contact-name-autocomplete'.

In the admin/config/search/search_autocomplete settings I made 3 forms

  • 'contact in relationship with' to have in a 'relationship contact B' views exposed filter with

    • HOW: 'Auto Submit' unchecked and 'Auto Redirect' unchecked
    • WHAT: callback url: /contact-id-autocomplete
    • ADVANCED: 'ID selector for this form': '#edit-contact-id-b-'
  • 'contact name' to have in a 'contact name' views exposed filter

    • HOW: 'Auto Submit' unchecked and 'Auto Redirect' unchecked
    • WHAT: callback url: /contact-name-autocomplete
    • ADVANCED: 'ID selector for this form': '#edit-name'
  • 'quick search' to have in the page header with

    • HOW: 'Auto Submit' checked and 'Auto Redirect' checked
    • WHAT: callback url: '/contact-id-autocomplete'
    • ADVANCED: 'ID selector for this form': '#edit-search', to be set depending of your page content

For the ADVANCED: 'ID selector for this form', you have to find a unique jQuery selector for your html input field

To style the autocomplete list, and have only one line by Contact, I made a custom autocomplete style named 'atd'
with a css file in my custom theme
and chose it in the search autocomplete settings in 'Select a theme for your suggestions'

input[data-sa-theme="atd"].ui-autocomplete {
  position: absolute;
  cursor: default;
* html input[data-sa-theme="atd"].ui-autocomplete {
  width: 1px; /* without this, the menu expands to 100% in IE6 */

input[data-sa-theme="atd"].ui-autocomplete.ui-menu {
  background: none;
  border-radius: 0px;
  color: #2c2c2c;
  border: 1px solid #c8c8c8;
  box-shadow: 2px 2px 2px -1px rgba(128,128,128,0.6);
  position: absolute;
  background-color: #ffffff;

ul[data-sa-theme="atd"].ui-menu {
  font-size: 1em;
ul[data-sa-theme="atd"].ui-menu {
  list-style: none;
  padding: 0px;
  margin: 0;
  display: block;
  float: left;
  min-width: 650px;
ul[data-sa-theme="atd"].ui-menu .ui-menu {
  margin-top: -3px;
ul[data-sa-theme="atd"].ui-menu .ui-menu-item {
  margin: 0;
  padding: 0;
  float: left;
  clear: left;
  width: 100%;
ul[data-sa-theme="atd"].ui-menu div.ui-autocomplete-field-group {
  display: none;
ul[data-sa-theme="atd"].ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 0;
  font-weight: normal;
  margin: -1px;

/* Interaction States */
ul[data-sa-theme="atd"].ui-menu a.ui-state-focus {
  background: none;
  background-color: #BAE4F6;
ul[data-sa-theme="atd"] .ui-autocomplete-fields {
  padding: 5px 6px;
  overflow: hidden;
ul[data-sa-theme="atd"] .ui-menu-item-first {
/*  border-top: 1px solid white;                   // <= change here */
ul[data-sa-theme="atd"] .ui-autocomplete-field-title {
  text-align: left;
  font-size: 1.3em;
ul[data-sa-theme="atd"] .ui-autocomplete-field-term {
  font-weight: bold;
  • could you spell out step by step, once module is installed, and you click 'add filter' in a View, are there new options available or what?
    – petednz - fuzion
    Oct 14, 2017 at 1:58
  • I'm not sure I understand your question. Do you want to know how to use the Search Autocomplete module, or how to set up a view that filters the data I want to show ? There is no filter 'items related to the user' or based on CiviCRM ACL, if that's what you're asking. I made a view with filters based on groups and relationships to obtain that. I have made PR in CiviCRM for views to able to manage civicrm groups and relationships. relationships have been included in Civi, but groups not yet : github.com/civicrm/civicrm-drupal/pull/427
    – veroniqueg
    Oct 16, 2017 at 12:59
  • Hi Veronique - thank you for commenting, and sorry my question wasn't clear, perhaps this isn't the right place to ask, and yes I think my question is more to do with what search_complete actually offers. I gave it a spin and didn't seem to get what I thought it offered. If you want to have some dialogue on it (eg via email), i thought i could 'give back' by assigning that PR to one of Fuzion team (Jitendra) to look at and hopefully progress.
    – petednz - fuzion
    Oct 16, 2017 at 19:05
  • perhaps you could expand your answer with a few steps in terms of how you get eg the Organisation Name field functioning as an autocomplete exposed filter on a views display
    – petednz - fuzion
    Oct 17, 2017 at 7:55
  • 1
    Updated my answer with details on how I did it
    – veroniqueg
    Jan 22, 2018 at 9:07

I can see how a select would make this a long list quickly. How about making the filter an Exposed Filter - Operator: starts with? You can do that out of the box with Views.

If you really want the autocomplete - give this a try: https://www.drupal.org/project/views_autocomplete_filters

But it may not work with CiviCRM fields (see Pete's comment below):

  • From memory the above module doesn't work out-of-the-box for civi fields but if that is still the case it would be a great addition to the civi - views code.
    – petednz - fuzion
    May 16, 2016 at 20:29
  • I think DMOZ's best bet is to just use Starts with - instead of a select. But curious - have you loaded the field in the view as well when trying views_autocomplete_filters? May 16, 2016 at 21:01
  • from memory 'autocomplete' didn't show for a Display Name yet on same site for a view based on Content I had 'autocomplete' for Title. have you had better experience? I also recall that (views_filters_selective) did give me a drop down list of Contacts.
    – petednz - fuzion
    May 16, 2016 at 21:28
  • I'll give views_filters_selective a go and report back
    – DMOZ
    May 18, 2016 at 4:46
  • So I have done a quick test with auto_complete_filters and it doesnt seem to present the "AutoComplete" option in the filter setup dialogue in the scenario listed in the question
    – DMOZ
    May 18, 2016 at 13:35

Better than using a drop down and manually adding all the options, you could try views_filters_selective which on a test view does give me a dropdown of Display Names of civi contacts.

  • Ended up that as a work-around I could (a) expose the filter (b) use 'Contains' (c) turn on AJAX (d) lastly above the 'Expose Filters' is a cog to enable setting 'Autosubmit'
    – DMOZ
    Aug 15, 2016 at 10:57
  • Can you clarify, were you using one of the modules mentioned in one of the answers? Otherwise am not clear how /where you see your autosubmit cog
    – petednz - fuzion
    Oct 14, 2017 at 1:51
  • having read this recipe i wonder if there is something missing around the line ... "exposed filter Operator 'Contains'" ie i think it needs to clarify what filter field is being added
    – petednz - fuzion
    Feb 23, 2018 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.