-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add an autocomplete suggestions examples (#88)
* Add Autocomplete Suggestions example * Update example * Use countries instead of !isValidation Co-Authored-By: Shu Ding <[email protected]>
- Loading branch information
Showing
5 changed files
with
338 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # Autocomplete Suggestions | ||
|
|
||
| ## One-Click Deploy | ||
|
|
||
| Deploy your own SWR project with ZEIT Now. | ||
|
|
||
| [](https://zeit.co/new/project?template=https://github.com/zeit/swr/tree/master/examples/autocomplete-suggestions) | ||
|
|
||
| ## How to Use | ||
|
|
||
| Download the example: | ||
|
|
||
| ```bash | ||
| curl https://codeload.github.com/zeit/swr/tar.gz/master | tar -xz --strip=2 swr-master/examples/autocomplete-suggestions | ||
| cd autocomplete-suggestions | ||
| ``` | ||
|
|
||
| Install it and run: | ||
|
|
||
| ```bash | ||
| yarn | ||
| yarn dev | ||
| # or | ||
| npm install | ||
| npm run dev | ||
| ``` | ||
|
|
||
| Deploy it to the cloud with [now](https://zeit.co/home) ([download](https://zeit.co/download)) | ||
|
|
||
| ``` | ||
| now | ||
| ``` | ||
|
|
||
| ## The Idea behind the Example | ||
|
|
||
| Show how to use SWR to fetch the suggestion for an autocomplete. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import fetch from 'isomorphic-unfetch' | ||
|
|
||
| export default async function (...args) { | ||
| const res = await fetch(...args) | ||
| return await res.json() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "name": "autocomplete-suggestions", | ||
| "version": "1.0.0", | ||
| "main": "index.js", | ||
| "license": "MIT", | ||
| "dependencies": { | ||
| "@reach/combobox": "0.5.3", | ||
| "isomorphic-unfetch": "3.0.0", | ||
| "next": "9.1.1", | ||
| "react": "16.11.0", | ||
| "react-dom": "16.11.0", | ||
| "swr": "latest" | ||
| }, | ||
| "scripts": { | ||
| "dev": "next", | ||
| "start": "next start", | ||
| "build": "next build" | ||
| } | ||
| } |
233 changes: 233 additions & 0 deletions
233
examples/autocomplete-suggestions/pages/api/suggestions.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,233 @@ | ||
| const countries = [ | ||
| "United States", | ||
| "Canada", | ||
| "United Kingdom", | ||
| "Argentina", | ||
| "Australia", | ||
| "Austria", | ||
| "Belgium", | ||
| "Brazil", | ||
| "Chile", | ||
| "China", | ||
| "Colombia", | ||
| "Croatia", | ||
| "Denmark", | ||
| "Dominican Republic", | ||
| "Egypt", | ||
| "Finland", | ||
| "France", | ||
| "Germany", | ||
| "Greece", | ||
| "Hong Kong", | ||
| "India", | ||
| "Indonesia", | ||
| "Ireland", | ||
| "Israel", | ||
| "Italy", | ||
| "Japan", | ||
| "Jordan", | ||
| "Kuwait", | ||
| "Lebanon", | ||
| "Malaysia", | ||
| "Mexico", | ||
| "Netherlands", | ||
| "New Zealand", | ||
| "Nigeria", | ||
| "Norway", | ||
| "Pakistan", | ||
| "Panama", | ||
| "Peru", | ||
| "Philippines", | ||
| "Poland", | ||
| "Russia", | ||
| "Saudi Arabia", | ||
| "Serbia", | ||
| "Singapore", | ||
| "South Africa", | ||
| "South Korea", | ||
| "Spain", | ||
| "Sweden", | ||
| "Switzerland", | ||
| "Taiwan", | ||
| "Thailand", | ||
| "Turkey", | ||
| "United Arab Emirates", | ||
| "Venezuela", | ||
| "Portugal", | ||
| "Luxembourg", | ||
| "Bulgaria", | ||
| "Czech Republic", | ||
| "Slovenia", | ||
| "Iceland", | ||
| "Slovakia", | ||
| "Lithuania", | ||
| "Trinidad and Tobago", | ||
| "Bangladesh", | ||
| "Sri Lanka", | ||
| "Kenya", | ||
| "Hungary", | ||
| "Morocco", | ||
| "Cyprus", | ||
| "Jamaica", | ||
| "Ecuador", | ||
| "Romania", | ||
| "Bolivia", | ||
| "Guatemala", | ||
| "Costa Rica", | ||
| "Qatar", | ||
| "El Salvador", | ||
| "Honduras", | ||
| "Nicaragua", | ||
| "Paraguay", | ||
| "Uruguay", | ||
| "Puerto Rico", | ||
| "Bosnia and Herzegovina", | ||
| "Palestinian Authority", | ||
| "Tunisia", | ||
| "Bahrain", | ||
| "Vietnam", | ||
| "Ghana", | ||
| "Mauritius", | ||
| "Ukraine", | ||
| "Malta", | ||
| "Bahamas", | ||
| "Maldives", | ||
| "Oman", | ||
| "Macedonia", | ||
| "Latvia", | ||
| "Estonia", | ||
| "Iraq", | ||
| "Algeria", | ||
| "Albania", | ||
| "Nepal", | ||
| "Macau", | ||
| "Montenegro", | ||
| "Senegal", | ||
| "Georgia", | ||
| "Brunei", | ||
| "Uganda", | ||
| "Guadeloupe", | ||
| "Barbados", | ||
| "Azerbaijan", | ||
| "Tanzania", | ||
| "Libya", | ||
| "Martinique", | ||
| "Cameroon", | ||
| "Botswana", | ||
| "Ethiopia", | ||
| "Kazakhstan", | ||
| "Namibia", | ||
| "Netherlands Antilles", | ||
| "Madagascar", | ||
| "New Caledonia", | ||
| "Moldova", | ||
| "Fiji", | ||
| "Belarus", | ||
| "Jersey", | ||
| "Guam", | ||
| "Yemen", | ||
| "Zambia", | ||
| "Isle Of Man", | ||
| "Haiti", | ||
| "Cambodia", | ||
| "Aruba", | ||
| "French Polynesia", | ||
| "Afghanistan", | ||
| "Bermuda", | ||
| "Guyana", | ||
| "Armenia", | ||
| "Malawi", | ||
| "Antigua and Barbuda", | ||
| "Rwanda", | ||
| "Guernsey", | ||
| "Gambia", | ||
| "Faroe Islands", | ||
| "St. Lucia", | ||
| "Cayman Islands", | ||
| "Benin", | ||
| "Andorra", | ||
| "Grenada", | ||
| "US Virgin Islands", | ||
| "Belize", | ||
| "Saint Vincent and the Grenadines", | ||
| "Mongolia", | ||
| "Mozambique", | ||
| "Mali", | ||
| "Angola", | ||
| "French Guiana", | ||
| "Uzbekistan", | ||
| "Djibouti", | ||
| "Burkina Faso", | ||
| "Monaco", | ||
| "Togo", | ||
| "Greenland", | ||
| "Gabon", | ||
| "Gibraltar", | ||
| "Republic of the Congo", | ||
| "Kyrgyzstan", | ||
| "Papua New Guinea", | ||
| "Bhutan", | ||
| "Saint Kitts and Nevis", | ||
| "Swaziland", | ||
| "Lesotho", | ||
| "Laos", | ||
| "Liechtenstein", | ||
| "Northern Mariana Islands", | ||
| "Suriname", | ||
| "Seychelles", | ||
| "British Virgin Islands", | ||
| "Turks and Caicos Islands", | ||
| "Dominica", | ||
| "Mauritania", | ||
| "Aland Islands", | ||
| "San Marino", | ||
| "Sierra Leone", | ||
| "Niger", | ||
| "Democratic Republic of the Congo", | ||
| "Anguilla", | ||
| "Mayotte", | ||
| "Cape Verde", | ||
| "Guinea", | ||
| "Turkmenistan", | ||
| "Burundi", | ||
| "Tajikistan", | ||
| "Vanuatu", | ||
| "Solomon Islands", | ||
| "Eritrea", | ||
| "Samoa", | ||
| "American Samoa", | ||
| "Falkland Islands", | ||
| "Equatorial Guinea", | ||
| "Tonga", | ||
| "Comoros", | ||
| "Palau", | ||
| "Federated States of Micronesia", | ||
| "Central African Republic", | ||
| "Somalia", | ||
| "Marshall Islands", | ||
| "Vatican City", | ||
| "Chad", | ||
| "Kiribati", | ||
| "Sao Tome and Principe", | ||
| "Tuvalu", | ||
| "Nauru", | ||
| "Réunion", | ||
| "Cuba", | ||
| "Cote d'Ivoire", | ||
| "Timor Leste", | ||
| "North Korea", | ||
| "Iran", | ||
| "Liberia", | ||
| "Myanmar", | ||
| "Oman", | ||
| "Saint Lucia", | ||
| "Syria", | ||
| "Sudan" | ||
| ] | ||
|
|
||
| export default (req, res) => { | ||
| const results = countries | ||
| .filter(country => country.toLowerCase().startsWith(req.query.value)) | ||
|
|
||
| res.json(results); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import fetcher from '../libs/fetcher' | ||
| import { | ||
| Combobox, | ||
| ComboboxInput, | ||
| ComboboxPopover, | ||
| ComboboxList, | ||
| ComboboxOption | ||
| } from '@reach/combobox' | ||
|
|
||
| import useSWR from 'swr' | ||
|
|
||
| export default () => { | ||
| const [searchTerm, setSearchTerm] = React.useState(null) | ||
| const { data: countries = [], isValidating } = useSWR( | ||
| () => (searchTerm ? `/api/suggestions?value=${searchTerm}` : null), | ||
| fetcher | ||
| ) | ||
|
|
||
| function handleSearchTermChange(event) { | ||
| setSearchTerm(event.target.value) | ||
| } | ||
|
|
||
| return ( | ||
| <div style={{ textAlign: 'center' }}> | ||
| <h1>Country Search</h1> | ||
| <Combobox> | ||
| <ComboboxInput | ||
| className="country-search-input" | ||
| onChange={handleSearchTermChange} | ||
| aria-label="Countries" | ||
| /> | ||
| {countries && countries.length > 0 && ( | ||
| <ComboboxPopover className="shadow-popup"> | ||
| <ComboboxList> | ||
| {countries.map(country => ( | ||
| <ComboboxOption key={country} value={country} /> | ||
| ))} | ||
| </ComboboxList> | ||
| </ComboboxPopover> | ||
| )} | ||
| </Combobox> | ||
| </div> | ||
| ) | ||
| } |