2

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.

2

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;
}
  • 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 '17 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 '17 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 '17 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 '17 at 7:55
  • 1
    Updated my answer with details on how I did it – veroniqueg Jan 22 '18 at 9:07
1

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 '16 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? – KarinG - Semper IT May 16 '16 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 '16 at 21:28
  • I'll give views_filters_selective a go and report back – DMOZ May 18 '16 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 '16 at 13:35
1

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 '16 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 '17 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 '18 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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