https://github.com/gerhynes/type-ahead
A page created to parse and display an array of US cities. Built for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/type-ahead
fetch javascript javascript30
Last synced: 3 months ago
JSON representation
A page created to parse and display an array of US cities. Built for Wes Bos' JavaScript 30 course.
- Host: GitHub
- URL: https://github.com/gerhynes/type-ahead
- Owner: gerhynes
- Created: 2017-10-06T08:39:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-14T19:36:07.000Z (about 8 years ago)
- Last Synced: 2025-01-31T11:34:27.367Z (12 months ago)
- Topics: fetch, javascript, javascript30
- Language: JavaScript
- Homepage: https://gk-hynes.github.io/type-ahead/
- Size: 3.91 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Type Ahead](https://gk-hynes.github.io/type-ahead/)
A page created to parse and display an array of US cities. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.
[](https://gk-hynes.github.io/type-ahead/)
## Notes
This page uses the Fetch API instead of jQuery etc.
Fetch returns a promise, not the data itself. Call `.then` against it and it will return a 'blob' of data.
This 'blob' doesn't know what kind of data it is. Use `blob.json().then()` to return another promise and then get the raw data from it.
To get the data into the empty `cities` array you could set `cities` as a `let` variable.
Alternatively, if you want to keep cities as a `const` variable you can spread the data into it: `cities.push(...data)`.
Call `filter` on the cities array and use a regex to check if the city/state matches the search. (You need the syntax below to put a variable into a regular expression.)
```js
function findMatches(wordToMatch, cities) {
return cities.filter(place => {
// check if city or state matches what is searched for
const regex = new RegExp(wordToMatch, "gi");
return place.city.match(regex) || place.state.match(regex);
});
}
```
Select the search box and suggestions, listen for a change event or keyup and run the `displayMatches` function.
Use `map` to loop over the returned array and return the html you want to display. (`map` will return an array so you can call `.join('')` on the end to return a string.)
To highlight the search term in the returned city and state names, replace the word with a span with a class of hl and the matched term. Use regexes again here.
```js
const cityName = place.city.replace(
regex,
`${this.value}`
);
```
You can also use regexes to format the population figure which is returned:
```js
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
```