{"id":1442,"date":"2019-07-29T17:06:19","date_gmt":"2019-07-30T00:06:19","guid":{"rendered":"https:\/\/doubleecpu.com\/?page_id=1442"},"modified":"2019-07-29T17:12:45","modified_gmt":"2019-07-30T00:12:45","slug":"myajaxtypeahead","status":"publish","type":"page","link":"https:\/\/doubleecpu.com\/index.php\/raspian-linux-programs\/javascript-2\/myjs30\/myajaxtypeahead\/","title":{"rendered":"myAjaxTypeAhead"},"content":{"rendered":"\n<form class=\"search-form\">\n    <input type=\"text\" class=\"search\" placeholder=\"City or State\">\n    <ul class=\"suggestions\">\n      <li>Filter for a city<\/li>\n      <li>or a state<\/li>\n    <\/ul>\n  <\/form>\n<script>\nconst endpoint = 'https:\/\/gist.githubusercontent.com\/Miserlou\/c5cd8364bf9b2420bb29\/raw\/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6\/cities.json';\nconst cities = [];\nfetch(endpoint)\n  .then(blob => blob.json())\n  .then(data => cities.push(...data));\n  \nfunction findMatches(wordToMatch, cities) {\n  return cities.filter(place => {\n    \/\/ here we need to figure out if the city or state matches what was searched\n    const regex = new RegExp(wordToMatch, 'gi');\n    return place.city.match(regex) || place.state.match(regex)\n  });\n}\nfunction numberWithCommas(x) {\n  return x.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, ',');\n}\nfunction displayMatches() {\n  const matchArray = findMatches(this.value, cities);\n  const html = matchArray.map(place => {\n    const regex = new RegExp(this.value, 'gi');\n    const cityName = place.city.replace(regex, `<span class=\"hl\">${this.value}<\/span>`);\n    const stateName = place.state.replace(regex, `<span class=\"hl\">${this.value}<\/span>`);\n    return `\n      <li>\n        <span class=\"name\">${cityName}, ${stateName}<\/span>\n        <span class=\"population\">${numberWithCommas(place.population)}<\/span>\n      <\/li>\n    `;\n  }).join('');\n  suggestions.innerHTML = html;\n}\nconst searchInput = document.querySelector('.search');\nconst suggestions = document.querySelector('.suggestions');\nsearchInput.addEventListener('change', displayMatches);\nsearchInput.addEventListener('keyup', displayMatches);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Filter for a city or a state<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1022,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1442","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/comments?post=1442"}],"version-history":[{"count":0,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1442\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1022"}],"wp:attachment":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/media?parent=1442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}