Autocomplete filter in Drupal Views
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;                   // &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;
}