Autocomplete filter in Drupal Views

Question

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

RELATIONSHIPS

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

FIELDS

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

FILTER CRITERIA

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.

Answer 1

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'

/* AUTOCOMPLETE */
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;
}

/* AUTOCOMPLETE MENU */
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;
  border:none;
}

/* 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;
}

Answer 2

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):

Answer 3

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.