Autocomplete

HTML

<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
        <aside class="mdc-drawer mdc-drawer--temporary mdc-typography">
          <nav class="mdc-drawer__drawer">
            <header class="mdc-drawer__header">
              <div class="mdc-drawer__header-content">
                Header here
              </div>
            </header>
            <nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
              <a class="mdc-list-item mdc-list-item--activated" href="#">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
              </a>
              <a class="mdc-list-item" href="#">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
              </a>
            </nav>
          </nav>
        </aside>
        <header class="mdc-toolbar mdc-toolbar--fixed toolbar--custom">
          <div class="mdc-toolbar__row">
            <section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
              <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
              <span class="mdc-toolbar__title">Title</span>
            </section>
            <section class="mdc-toolbar__section">
              <form action="/search" method="get" class="search-field-desktop">
                <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon autocomplete-search-field">
                  <i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
                  <input name="q"
                       ...

SCSS

$mdc-typography-font-family: Comfortaa, cursive;
$mdc-theme-primary: #00BFA5;
$mdc-theme-secondary: #1DE9B6;
$mdc-theme-background: #A7FFEB;
$white: #fff;
$black: #484848;
$blue-grey-light: #78909C;

@mixin pulse {
  -webkit-animation: pulse .65s infinite alternate;
  animation: pulse .65s infinite alternate;
}

@keyframes pulse {
  0%{opacity:.5}100%{opacity:1}
}

body {
  margin: 0;
}
#app {
  display: flex;
}
.page-content {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
}

.toolbar--custom {
  color: $white;

  .mdc-toolbar__row {
    min-height: 56px;
  }

  form, .autocomplete-search-field {
    width: 100%;
  }

  .mdc-text-field--box:not(.mdc-text-field--upgraded) {
    height: 36px;
  }
  .mdc-text-field--box {
    overflow: visible;
    margin: auto;

    .mdc-text-field__icon {
      bottom: 8px;
      font-size: 22px;
    }
  }

  .mdc-text-field--box:after,
  .mdc-text-field--box:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #search-input-open {
    display: none;
  }

  @media only screen and (max-width: 782px) {
    #search-input-open {
      display: block;
    }
    .search-field-desktop {
      display: none;
    }
  }
}

.search-field-phone {
  clip-path: circle(0%);
  visibility: hidden;
  .mdc-text-field {
    clip-path: circle(0%);
  }
}

@mixin search-animated-open {
  -webkit-animation: open 0.3s forwards;
  animation: open 0.3s forwards;
  animation-timing-function: $mdc-animation-standard-curve-timing-function;
}

@mixin search-animated-close {
  -webkit-animation: close 0.3s forwards;
  animation: close 0.3s forwards;
  animation-timing-function: $mdc-animation-standard-curve-timing-function;
}

.search-field-phone-open,  {
  visibility: visible;
  @include search-animated-open;

  .mdc-text-field {
    @include search-animated-open;
  }
}

.search-field-phone-close,  {
  @include search-animated-close;

  .mdc-text-field {
    @include...

JavaScript

window.mdc.autoInit();
let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
document.querySelector('.mdc-toolbar__menu-icon').addEventListener('click', () => drawer.open = !drawer.open);

let openIcon = document.querySelector('#search-input-open');
let closeIcon = document.querySelector('#search-input-close');
let inputField = document.querySelector('.search-field-phone');
openIcon.addEventListener('click', () => {
    inputField.classList.add('search-field-phone-open');
    inputField.classList.remove('search-field-phone-close', 'search-field-phone');
});
closeIcon.addEventListener('click', () => {
    inputField.classList.add('search-field-phone-close');
    inputField.classList.remove('search-field-phone-open');
});


var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
var index = client.initIndex('contacts');

$('.aa-input-search').autocomplete({ hint: false }, [
  {
    source: function(q, cb) {
      index.search(q, { hitsPerPage: 5 }, function(error, content) {
        if (error) {
          cb([]);
          return;
        }
        cb(content.hits, content);
      });
    },
    displayKey: 'name',
    templates: {
      suggestion: function(suggestion) {
        return suggestion._highlightResult.name.value;
      }
    }
  }
]);