JS30 Ajax Type Ahead

index.html

 <form class="search-form">
    <input type="text" class="search" placeholder="City or State">
    <ul class="suggestions">
      <li>Filter for a city</li>
      <li>or a state</li>
    </ul>
  </form>

js30-ajax-type-ahead.markdown

JS30 Ajax Type Ahead

JS30 Ajax Type Ahead

A Pen by Alex on CodePen.

License.

script.js

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
let cities = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data))

function findMatches(wordToMatch, cities) {
  return cities.filter(place => {
    const regex = new RegExp(wordToMatch, 'gi');
    return place.city.match(regex) || place.state.match(regex)
  });
}

function displayMatches() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
    const regex = new RegExp(this.value, 'gi');
    const city = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
    const state = place.state.replace(this.value, `<span class="hl">${this.value}</span>`);
    return `
      <li>
          <span class='name'>${city}, ${state}</span>
          <span class='population'>${place.population}</span>
      </li>
  `;
  });
  suggestions.innerHTML = html.join('');
}
const input = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
input.addEventListener('keyup', displayMatches)

style.scss

html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: "Arial", san-sarifs;
  font-size: 20px;
  font-weight: 200;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  text-align: center;
}

.search-form {
  max-width: 400px;
  margin: 50px auto;
}

input {
  padding: 10px;
  outline: 0;
  text-align: center;
  border: 5px solid #757272;
  border-radius: 5px;
  width: 120%;
  left: -10%;
  position: relative;
  top: 10px;
  font-size: 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
  z-index: 2;
}

.suggestions {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

.suggestions li {
  background: #fff;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
  box-shadow: 0 0 10px rgba(0, 0, 0, .14);
  margin: 0;
  transition: background .2s;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}

.suggestions li:nth-child(even) {
  transform: perspective( 100px ) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom,  #ffffff 0%,#EFEFEF 100%);
}

.suggestions li:nth-child(odd) {
  transform: perspective( 100px ) rotateX(-3deg) translateY(3px) scale(1.001);
  background: linear-gradient(to top,  #ffffff 0%,#EFEFEF 100%);
}

.population {
  font-size: 15px;
}

.hl {
  background: yellow;
}