Answers.Body: <p>I did a similar auto-complete feature on a Civicrm-based view with 'Search Autocomplete' <a href="https://www.drupal.org/project/search_autocomplete" rel="nofollow noreferrer">https://www.drupal.org/project/search_autocomplete</a>.
  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.</p>
  
  <p>I made a <strong>view 'search_name_or_email'</strong>  based on CiviCRM Contact with</p>
  
  <ul>
  <li>among other fields 
  
  <ul>
  <li>'contact ID', 'sort name', 'email address', </li>
  <li>a custom text field named 'autocomplete text' that contains '[[id]] [sort_name] :: [email]'</li>
  <li>a 'CiviCRM Contacts: Text Link' that points to the contact page</li>
  </ul></li>
  <li>exposed filter Operator 'Contains' </li>
  <li>'Choose fields to combine for filtering': 'name' and 'email address'</li>
  <li>in 'More' the 'Filter identifier' is 'term' (this one was important)</li>
  <li>(here add more fields and filters according to what you want to display and list, by example filter on Contact type for Organizations only)</li>
  </ul>
  
  <p>the view format is 'Autocomplete JSON' with</p>
  
  <ul>
  <li>group fields by: 'Contact ID'</li>
  <li>input label: 'Contact ID'</li>
  <li>input Link: 'Text Link'</li>
  <li>Ouput Field: 'Autocomplete Text'</li>
  </ul>
  
  <p>The view is limited to 10 items. Path: '/contact-id-autocomplete'</p>
  
  <p>I made another display on the same view<br>
  that has input label 'Name' instead of 'Contact ID'<br>
  so when we click on the autocomplete list it fills the field with the contact name rather than the ID.<br>
  Path: '/contact-name-autocomplete'.</p>
  
  <p>In the <strong>admin/config/search/search_autocomplete settings</strong> I made 3 forms</p>
  
  <ul>
  <li><p>'contact in relationship with' to have in a 'relationship contact B' views exposed filter with</p>
  
  <ul>
  <li>HOW: 'Auto Submit' unchecked and 'Auto Redirect' unchecked </li>
  <li>WHAT: callback url: /contact-id-autocomplete</li>
  <li>ADVANCED: 'ID selector for this form': '#edit-contact-id-b-'</li>
  </ul></li>
  <li><p>'contact name' to have in a 'contact name' views exposed filter</p>
  
  <ul>
  <li>HOW: 'Auto Submit' unchecked and 'Auto Redirect' unchecked </li>
  <li>WHAT: callback url: /contact-name-autocomplete</li>
  <li>ADVANCED: 'ID selector for this form': '#edit-name'</li>
  </ul></li>
  <li><p>'quick search' to have in the page header with</p>
  
  <ul>
  <li>HOW: 'Auto Submit' checked and 'Auto Redirect' checked </li>
  <li>WHAT: callback url: '/contact-id-autocomplete'</li>
  <li>ADVANCED: 'ID selector for this form': '#edit-search', to be set depending of your page content</li>
  </ul></li>
  </ul>
  
  <p>For the ADVANCED: 'ID selector for this form', you have to find a unique jQuery selector for your html input field</p>
  
  <p><strong>To style the autocomplete list</strong>, and have only one line by Contact, I made a custom autocomplete style named 'atd'<br>
  with a css file in my custom theme<br>
  and chose it in the search autocomplete settings in 'Select a theme for your suggestions'</p>
  
  <pre><code>/* 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;                   // &lt;= 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;
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-14T01:58:25.833Z
Answers.Text: 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?
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-16T12:59:01.820Z
Answers.Text: 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 : https://github.com/civicrm/civicrm-drupal/pull/427
Answers.UserDisplayName: veroniqueg
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-16T19:05:42.663Z
Answers.Text: 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.
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-17T07:55:16.723Z
Answers.Text: 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
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-06T08:21:18.373Z
Answers.Text: I'm sorry I'm no longer on a CiviCRM project so I don't have time right now to update the PR. If you can take over that would be great. I will make time to explain how I used the autocomplete filter some time soon (I hope).
Answers.UserDisplayName: veroniqueg
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-22T09:07:22.923Z
Answers.Text: Updated my answer with details on how I did it
Answers.UserDisplayName: veroniqueg
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-22T19:07:39.237Z
Answers.LastActivityDate: 2018-02-21T04:44:40.420Z
Answers.LastEditDate: 2018-02-21T04:44:40.420Z
Answers.UserDisplayName: veroniqueg
Answers.Body: <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-15T10:57:33.303Z
Answers.Text: 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'
Answers.UserDisplayName: DMOZ
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-14T01:51:11.833Z
Answers.Text: 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
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-23T00:15:39.350Z
Answers.Text: 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
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-16T21:29:52.573Z
Answers.LastActivityDate: 2016-05-16T21:29:52.573Z
Answers.UserDisplayName: petednz - fuzion
Answers.Body: <p>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. </p>
  
  <p>If you really want the autocomplete - give this a try: <a href="https://www.drupal.org/project/views_autocomplete_filters" rel="nofollow">https://www.drupal.org/project/views_autocomplete_filters</a></p>
  
  <p>But it may not work with CiviCRM fields (see Pete's comment below):</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-16T20:29:44.997Z
Answers.Text: 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.
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-16T21:01:20.523Z
Answers.Text: 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?
Answers.UserDisplayName: KarinG - Semper IT
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-16T21:28:48.353Z
Answers.Text: 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.
Answers.UserDisplayName: petednz - fuzion
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-18T04:46:12.193Z
Answers.Text: I'll give views_filters_selective a go and report back
Answers.UserDisplayName: DMOZ
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-18T13:35:52.590Z
Answers.Text: 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
Answers.UserDisplayName: DMOZ
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-16T19:37:41.707Z
Answers.LastActivityDate: 2016-05-16T21:07:27.180Z
Answers.LastEditDate: 2016-05-16T21:07:27.180Z
Answers.UserDisplayName: KarinG - Semper IT
Body: <p>I have a view created that has Organisation Name and a contacts Display name shown.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>To add more clarity to my VIEW setup</p>
  
  <p>RELATIONSHIPS</p>
  
  <blockquote>
    <p>CiviCRM Contacts: CiviCRM Relationship (starting from contact A)<br>
    (CiviCRM Relationship (starting from contact A)) CiviCRM Relationships: Contact ID B</p>
  </blockquote>
  
  <p>FIELDS  </p>
  
  <blockquote>
    <p>CiviCRM Contacts: Organization Name (Organization Name)<br>
    (CiviCRM Contact B) CiviCRM Contacts: Display Name (Display Name)</p>
  </blockquote>
  
  <p>FILTER CRITERIA  </p>
  
  <blockquote>
    <p>CiviCRM Contacts: Display Name (exposed)</p>
  </blockquote>
  
  <p>This gives results (shown in a table) with Orgnisation Name in left column and Contacts Name in right column.</p>
  
  <p>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.</p>
  
Tags: <drupal><drupal-views>
Title: Autocomplete filter in Drupal Views
ThreadText: # Autocomplete filter in Drupal Views
  
  (Asked by: username_0 on 2016-05-16)
  
  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.
  
  **Tags:** drupal, drupal-views
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_1 on 2016-09-22. Score: 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;
  }
  
  > **Comments:**
  > **username_2**: 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?  
  > **username_1**: 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 : https://github.com/civicrm/civicrm-drupal/pull/427  
  > **username_2**: 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.  
  > **username_2**: 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  
  > **username_1**: I'm sorry I'm no longer on a CiviCRM project so I don't have time right now to update the PR. If you can take over that would be great. I will make time to explain how I used the autocomplete filter some time soon (I hope).  
  > **username_1**: Updated my answer with details on how I did it  
  
  ---
  
  ### Answer by username_2 on 2016-05-16. Score: 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.
  
  > **Comments:**
  > **username_0**: 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'  
  > **username_2**: 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  
  > **username_2**: 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  
  
  ---
  
  ### Answer by username_3 on 2016-05-16. Score: 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):
  
  > **Comments:**
  > **username_2**: 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.  
  > **username_3**: I think username_0'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?  
  > **username_2**: 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.  
  > **username_0**: I'll give views_filters_selective a go and report back  
  > **username_0**: 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  
  
  ---
  
  