Skip to content

Instantly share code, notes, and snippets.

@jdlrobson

jdlrobson/CustomElement.html

Created August 18, 2017 17:44
Show Gist options
  • Save jdlrobson/5efd928840a490caa3bd7c1c31d24b23 to your computer and use it in GitHub Desktop.
Save jdlrobson/5efd928840a490caa3bd7c1c31d24b23 to your computer and use it in GitHub Desktop.
Download ZIP
CustomElement.html - autocomplete
Raw
CustomElement.html
<!DOCTYPE HTML>
<html>
<head>
<title>Custom element autocomplete</title>
</head>
<body>
<h1>CustomElement AutoComplete</h1>
<p>
Upgrades a standard select element to work like an autocomplete by using CustomElements.
It will degrade on older browsers that do not support elements to a select dropdown.
</p>
<form method="get">
<mw-ui-autocomplete placeholder="Type here to search">
<select name="country">
<option>Afghanistan</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
<option>Antigua and Barbuda</option>
<option>Argentina</option>
<option>Armenia</option>
<option>Aruba</option>
<option>Australia</option>
<option>Austria</option>
<option>Azerbaijan</option>
<option>Bahamas</option>
<option>Bahrain</option>
<option>Bangladesh</option>
<option>Barbados</option>
<option>Belarus</option>
<option>Belgium</option>
<option>Belize</option>
<option>Benin</option>
<option>Bermuda</option>
<option>Bhutan</option>
<option>Bolivia</option>
<option>Bosnia and Herzegovina</option>
<option>Botswana</option>
<option>Bouvet Island</option>
<option>Brazil</option>
<option>British Antarctic Territory</option>
<option>British Indian Ocean Territory</option>
<option>British Virgin Islands</option>
<option>Brunei</option>
<option>Bulgaria</option>
<option>Burkina Faso</option>
<option>Burundi</option>
<option>Cambodia</option>
<option>Cameroon</option>
<option>Canada</option>
<option>Canton and Enderbury Islands</option>
<option>Cape Verde</option>
<option>Cayman Islands</option>
<option>Central African Republic</option>
<option>Chad</option>
<option>Chile</option>
<option>China</option>
<option>Christmas Island</option>
<option>Cocos [Keeling] Islands</option>
<option>Colombia</option>
<option>Comoros</option>
<option>Congo - Brazzaville</option>
<option>Congo - Kinshasa</option>
<option>Cook Islands</option>
<option>Costa Rica</option>
<option>Croatia</option>
<option>Cuba</option>
<option>Cyprus</option>
<option>Czech Republic</option>
<option>Côte d’Ivoire</option>
<option>Denmark</option>
<option>Djibouti</option>
<option>Dominica</option>
<option>Dominican Republic</option>
<option>Dronning Maud Land</option>
<option>East Germany</option>
<option>Ecuador</option>
<option>Egypt</option>
<option>El Salvador</option>
<option>Equatorial Guinea</option>
<option>Eritrea</option>
<option>Estonia</option>
<option>Ethiopia</option>
<option>Falkland Islands</option>
<option>Faroe Islands</option>
<option>Fiji</option>
<option>Finland</option>
<option>France</option>
<option>French Guiana</option>
<option>French Polynesia</option>
<option>French Southern Territories</option>
<option>French Southern and Antarctic Territories</option>
<option>Gabon</option>
<option>Gambia</option>
<option>Georgia</option>
<option>Germany</option>
<option>Ghana</option>
<option>Gibraltar</option>
<option>Greece</option>
<option>Greenland</option>
<option>Grenada</option>
<option>Guadeloupe</option>
<option>Guam</option>
<option>Guatemala</option>
<option>Guernsey</option>
<option>Guinea</option>
<option>Guinea-Bissau</option>
<option>Guyana</option>
<option>Haiti</option>
<option>Heard Island and McDonald Islands</option>
<option>Honduras</option>
<option>Hong Kong SAR China</option>
<option>Hungary</option>
<option>Iceland</option>
<option>India</option>
<option>Indonesia</option>
<option>Iran</option>
<option>Iraq</option>
<option>Ireland</option>
<option>Isle of Man</option>
<option>Israel</option>
<option>Italy</option>
<option>Jamaica</option>
<option>Japan</option>
<option>Jersey</option>
<option>Johnston Island</option>
<option>Jordan</option>
<option>Kazakhstan</option>
<option>Kenya</option>
<option>Kiribati</option>
<option>Kuwait</option>
<option>Kyrgyzstan</option>
<option>Laos</option>
<option>Latvia</option>
<option>Lebanon</option>
<option>Lesotho</option>
<option>Liberia</option>
<option>Libya</option>
<option>Liechtenstein</option>
<option>Lithuania</option>
<option>Luxembourg</option>
<option>Macau SAR China</option>
<option>Macedonia</option>
<option>Madagascar</option>
<option>Malawi</option>
<option>Malaysia</option>
<option>Maldives</option>
<option>Mali</option>
<option>Malta</option>
<option>Marshall Islands</option>
<option>Martinique</option>
<option>Mauritania</option>
<option>Mauritius</option>
<option>Mayotte</option>
<option>Metropolitan France</option>
<option>Mexico</option>
<option>Micronesia</option>
<option>Midway Islands</option>
<option>Moldova</option>
<option>Monaco</option>
<option>Mongolia</option>
<option>Montenegro</option>
<option>Montserrat</option>
<option>Morocco</option>
<option>Mozambique</option>
<option>Myanmar [Burma]</option>
<option>Namibia</option>
<option>Nauru</option>
<option>Nepal</option>
<option>Netherlands</option>
<option>Netherlands Antilles</option>
<option>Neutral Zone</option>
<option>New Caledonia</option>
<option>New Zealand</option>
<option>Nicaragua</option>
<option>Niger</option>
<option>Nigeria</option>
<option>Niue</option>
<option>Norfolk Island</option>
<option>North Korea</option>
<option>North Vietnam</option>
<option>Northern Mariana Islands</option>
<option>Norway</option>
<option>Oman</option>
<option>Pacific Islands Trust Territory</option>
<option>Pakistan</option>
<option>Palau</option>
<option>Palestinian Territories</option>
<option>Panama</option>
<option>Panama Canal Zone</option>
<option>Papua New Guinea</option>
<option>Paraguay</option>
<option>People's Democratic Republic of Yemen</option>
<option>Peru</option>
<option>Philippines</option>
<option>Pitcairn Islands</option>
<option>Poland</option>
<option>Portugal</option>
<option>Puerto Rico</option>
<option>Qatar</option>
<option>Romania</option>
<option>Russia</option>
<option>Rwanda</option>
<option>Réunion</option>
<option>Saint Barthélemy</option>
<option>Saint Helena</option>
<option>Saint Kitts and Nevis</option>
<option>Saint Lucia</option>
<option>Saint Martin</option>
<option>Saint Pierre and Miquelon</option>
<option>Saint Vincent and the Grenadines</option>
<option>Samoa</option>
<option>San Marino</option>
<option>Saudi Arabia</option>
<option>Senegal</option>
<option>Serbia</option>
<option>Serbia and Montenegro</option>
<option>Seychelles</option>
<option>Sierra Leone</option>
<option>Singapore</option>
<option>Slovakia</option>
<option>Slovenia</option>
<option>Solomon Islands</option>
<option>Somalia</option>
<option>South Africa</option>
<option>South Georgia and the South Sandwich Islands</option>
<option>South Korea</option>
<option>Spain</option>
<option>Sri Lanka</option>
<option>Sudan</option>
<option>Suriname</option>
<option>Svalbard and Jan Mayen</option>
<option>Swaziland</option>
<option>Sweden</option>
<option>Switzerland</option>
<option>Syria</option>
<option>São Tomé and Príncipe</option>
<option>Taiwan</option>
<option>Tajikistan</option>
<option>Tanzania</option>
<option>Thailand</option>
<option>Timor-Leste</option>
<option>Togo</option>
<option>Tokelau</option>
<option>Tonga</option>
<option>Trinidad and Tobago</option>
<option>Tunisia</option>
<option>Turkey</option>
<option>Turkmenistan</option>
<option>Turks and Caicos Islands</option>
<option>Tuvalu</option>
<option>U.S. Minor Outlying Islands</option>
<option>U.S. Miscellaneous Pacific Islands</option>
<option>U.S. Virgin Islands</option>
<option>Uganda</option>
<option>Ukraine</option>
<option>Union of Soviet Socialist Republics</option>
<option>United Arab Emirates</option>
<option>United Kingdom</option>
<option>United States</option>
<option>Unknown or Invalid Region</option>
<option>Uruguay</option>
<option>Uzbekistan</option>
<option>Vanuatu</option>
<option>Vatican City</option>
<option>Venezuela</option>
<option>Vietnam</option>
<option>Wake Island</option>
<option>Wallis and Futuna</option>
<option>Western Sahara</option>
<option>Yemen</option>
<option>Zambia</option>
<option>Zimbabwe</option>
<option>Åland Islands</option>
</select>
</mw-ui-autocomplete>
<input type="submit">
</form>
<script>
class MediaWikiUIAutoComplete extends HTMLElement {
// This gets called when the HTML parser sees your tag
constructor() {
super(); // always call super() first in the ctor.
this.options = Array.from(this.querySelectorAll('option')).map(
(node)=>{return node.textContent}
);
this.placeholder = this.getAttribute('placeholder');
this.name = this.querySelector('select').getAttribute('name');
//var label =
//this.msg = 'Hello, World!';
}
clearResults(){
this.results.innerHTML = '';
}
setValue( ev ) {
this.input.value = ev.target.getAttribute('data-value');
this.clearResults();
}
onInput( ev ) {
const el = this;
const options = this.options;
const val = this.input.value;
const setValue = this.setValue;
const results = this.results;
this.clearResults();
if ( val ) {
options.filter((key) => {
return key.toLowerCase().indexOf( val.toLowerCase() ) > -1;
})
.forEach((optionText)=>{
const item = document.createElement('li');
item.textContent = optionText;
item.setAttribute('data-value', optionText);
item.addEventListener('click', setValue.bind(el));
results.appendChild(item);
});
}
}
connectedCallback() {
this.innerHTML = `<input placeholder="${this.placeholder}" name=${this.name} autocomplete="off"><ul/>`;
this.input = this.querySelector('input');
this.results = this.querySelector('ul');
this.input.addEventListener('keyup', this.onInput.bind(this));
}
}
window.customElements.define('mw-ui-autocomplete', MediaWikiUIAutoComplete);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment