Skip to content

Instantly share code, notes, and snippets.

@GentlemanHal

GentlemanHal/index.html

Created December 1, 2017 15:53
Show Gist options
  • Save GentlemanHal/daf44126eef3ca2ce3af65c5f2c49534 to your computer and use it in GitHub Desktop.
Save GentlemanHal/daf44126eef3ca2ce3af65c5f2c49534 to your computer and use it in GitHub Desktop.
Download ZIP
alphagov accessible-autocomplete problem in React v16
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accessible Autocomplete React examples</title>
<style>
/* Example page specific styling. */
html {
color: #111;
background: #FFF;
font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
body {
padding-left: 1rem;
padding-right: 1rem;
}
h1, h2, h3, h4, h5, h6 {
line-height: normal;
}
label {
display: block;
margin-bottom: .5rem;
}
code {
padding-left: .5em;
padding-right: .5em;
background: #EFEFEF;
font-weight: normal;
font-family: monospace;
}
main {
max-width: 40em;
margin-left: auto;
margin-right: auto;
}
.autocomplete-wrapper {
max-width: 20em;
margin-bottom: 4rem;
}
</style>
<link rel="stylesheet" href="../../dist/accessible-autocomplete.min.css">
</head>
<body>
<main>
<h1>Accessible Autocomplete React examples</h1>
<p>This page demonstrates using the autocomplete directly in React.</p>
<label for="autocomplete-default">Select your country</label>
<div id="tt-default" class="autocomplete-wrapper"></div>
</main>
<!-- We include the development version of React for debugging purposes. -->
<script type="text/javascript" src="https://unpkg.com/react@16.1.1/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@16.1.1/umd/react-dom.development.js"></script>
<script type="text/javascript" src="../../dist/lib/accessible-autocomplete.react.min.js"></script>
<script type="text/javascript">
function suggest (query, syncResults) {
var results = [
'Afghanistan',
'Akrotiri',
'Albania',
'Algeria',
'American Samoa',
'Andorra',
'Angola',
'Anguilla',
'Antarctica',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Aruba',
'Ashmore and Cartier Islands',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas, The',
'Bahrain',
'Bangladesh',
'Barbados',
'Bassas da India',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia',
'Bosnia and Herzegovina',
'Botswana',
'Bouvet Island',
'Brazil',
'British Indian Ocean Territory',
'British Virgin Islands',
'Brunei',
'Bulgaria',
'Burkina Faso',
'Burma',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Cayman Islands',
'Central African Republic',
'Chad',
'Chile',
'China',
'Christmas Island',
'Clipperton Island',
'Cocos (Keeling) Islands',
'Colombia',
'Comoros',
'Congo',
'Cook Islands',
'Coral Sea Islands',
'Costa Rica',
'Cote d\'Ivoire',
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Dhekelia',
'Djibouti',
'Dominica',
'Dominican Republic',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Europa Island',
'Falkland Islands',
'Faroe Islands',
'Fiji',
'Finland',
'France',
'French Guiana',
'French Polynesia',
'French Southern and Antarctic Lands',
'Gabon',
'Gambia,',
'Gaza Strip',
'Georgia',
'Germany',
'Ghana',
'Gibraltar',
'Glorioso Islands',
'Greece',
'Greenland',
'Grenada',
'Guadeloupe',
'Guam',
'Guatemala',
'Guernsey',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Heard Island and McDonald Islands',
'Holy See (Vatican City)',
'Honduras',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Isle of Man',
'Israel',
'Italy',
'Jamaica',
'Jan Mayen',
'Japan',
'Jersey',
'Jordan',
'Juan de Nova Island',
'Kazakhstan',
'Kenya',
'Kiribati',
'Korea, North',
'Korea, South',
'Kuwait',
'Kyrgyzstan',
'Laos',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macau',
'Macedonia',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Martinique',
'Mauritania',
'Mauritius',
'Mayotte',
'Mexico',
'Micronesia, Federated States of',
'Moldova',
'Monaco',
'Mongolia',
'Montserrat',
'Morocco',
'Mozambique',
'Namibia',
'Nauru',
'Navassa Island',
'Nepal',
'Netherlands',
'Netherlands Antilles',
'New Caledonia',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Niue',
'Norfolk Island',
'Northern Mariana Islands',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Panama',
'Papua New Guinea',
'Paracel Islands',
'Paraguay',
'Peru',
'Philippines',
'Pitcairn Islands',
'Poland',
'Portugal',
'Puerto Rico',
'Qatar',
'Reunion',
'Romania',
'Russia',
'Rwanda',
'Saint Helena',
'Saint Kitts and Nevis',
'Saint Lucia',
'Saint Pierre and Miquelon',
'Saint Vincent and the Grenadines',
'Samoa',
'San Marino',
'Sao Tome and Principe',
'Saudi Arabia',
'Senegal',
'Serbia and Montenegro',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'South Georgia and the South Sandwich Islands',
'Spain',
'Spratly Islands',
'Sri Lanka',
'Sudan',
'Suriname',
'Svalbard',
'Swaziland',
'Sweden',
'Switzerland',
'Syria',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
'Timor-Leste',
'Togo',
'Tokelau',
'Tonga',
'Trinidad and Tobago',
'Tromelin Island',
'Tunisia',
'Turkey',
'Turkmenistan',
'Turks and Caicos Islands',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Venezuela',
'Vietnam',
'Virgin Islands',
'Wake Island',
'Wallis and Futuna',
'West Bank',
'Western Sahara',
'Yemen',
'Zambia',
'Zimbabwe'
]
syncResults(query
? results.filter(function (result) {
return result.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
: []
)
}
</script>
<script type="text/javascript">
var element = document.querySelector('#tt-default')
var id = 'autocomplete-default'
ReactDOM.render(
React.createElement(Autocomplete.default, {
id: id,
source: suggest,
showAllValues: true
}),
element
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment