Advertisement
Guest User

Untitled

a guest
Nov 18th, 2018
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.89 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Type Ahead 👀</title>
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.  
  10. <form class="search-form">
  11. <input type="text" class="search" placeholder="City or State">
  12. <ul class="suggestions">
  13. <li>Filter for a city</li>
  14. <li>or a state</li>
  15. </ul>
  16. </form>
  17. <script>
  18. const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
  19.  
  20. const cities = [];
  21.  
  22. fetch(endpoint)
  23. .then(blob => blob.json())
  24. .then(data => cities.push(...data))
  25.  
  26. function findMatches(wordtoMatch, cities){
  27. return cities.filter(place => {
  28.  
  29. const regex = new RegExp(wordtoMatch, 'gi');
  30. return place.city.match(regex) || place.state.match(regex)
  31. })
  32. }
  33.  
  34. function displayMatches(){
  35.  
  36. }
  37. </script>
  38. </body>
  39. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement