javan/about.md Secret

## about.md

      
    Raw
  

              about.md
            
          
    Enhance <datalist> autocomplete

We'd like to use the <datalist> element in our applications to provide web-native autocomplete for <input> fields. Example:
<input type="email" list="contacts">

<datalist id="contacts">
  <option value="javan@basecamp.com">Javan Makhmali</option>
  <option value="sam@basecamp.com">Sam Stephenson</option>
</datalist>
Unfortunately, the current browser implementations are too inconsistent:


Chrome

Firefox

Safari


Displays <option> values
✓
✗
✓


Displays <option> labels
✓
✓
✗


Matches <option> values
✓
✗
✓


Matches <option> labels
✓
✓
✗


Commits <option> on Tab
✓
✓
✗


Commits <option> on Enter
✓
✓
✓


Chrome's implementation suits our needs best, and we're hopeful that Firefox and Safari will catch up. Until they do…
Your challenge

Using the message_form.html file below, build a custom autocomplete control that progressively enhances <input>s with a list attribute, using their associated <datalist> as a source of options. Match (or improve!) Chrome's implementation and provide a consistent cross-browser experience.

Use the supplied <script> and <style> elements. No third party frameworks, libraries, or external resources.
Target your solution to the latest versions of Chrome, Firefox, and Safari. You're free to use any features supported by all three.

How to submit your solution


Don't fork this gist as that would make your solution public for others to see. Instead, save a copy of message_form.html and work on it locally.
When you're done, create a new private gist with your solution and send us the link.


## message_form.html
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>New Message</title>
  <style>*,::after,::before{margin:0;padding:0;box-sizing:border-box}:focus{outline:0}body{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;font-size:16px;color:rgba(40,33,56);line-height:1.5;padding:2rem}form{max-width:40rem;margin:0 auto;padding:2rem;border-radius:1rem;box-shadow:0 .25rem 1.5rem .75rem rgba(173,174,179,.18)}label{margin:.2rem 1rem 0 0}button,input,textarea{line-height:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit;background:inherit;padding:.2rem .4rem;border:0}input[list]::-webkit-calendar-picker-indicator,input[list]::-webkit-list-button{display:none}textarea{width:100%;min-height:8rem;margin:.5rem 0;resize:none}button{cursor:pointer;color:#747480}button:focus{box-shadow:0 0 0 2px highlight}[type=submit]{cursor:pointer;font-weight:500;line-height:2;padding:0 .6rem;border-radius:1rem;background-color:#0f8287;color:#fff}.row{display:flex;border-bottom:1px solid #eaeaea;padding:.5rem}.row input,.row textarea{flex-grow:1}</style><script>addEventListener("click",({target:a})=>{if(a.hasAttribute("data-show-cc-fields")){const b=document.getElementById("cc-fields");b.replaceWith(b.content),document.getElementById("cc").focus(),a.remove()}})</script>

  <style>
    /* Your CSS */
  </style>

  <script>
    /* Your JavaScript */
  </script>

</head>
<body>
  <form>
    <div class="row">
      <label for="to">To</label>
      <input type="email" name="to" id="to" list="contacts" multiple required autofocus>
      <button type="button" tabindex="-1" data-show-cc-fields>Cc / Bcc</button>
    </div>

    <template id="cc-fields">
      <div class="row">
        <label for="cc">Cc</label>
        <input type="email" name="cc" id="cc" list="contacts" multiple>
      </div>
      <div class="row">
        <label for="bcc">Bcc</label>
        <input type="email" name="bcc" id="bcc" list="contacts" multiple>
      </div>
    </template>

    <div class="row">
      <label for="subject">Subject</label>
      <input type="text" name="subject" id="subject" list="recent-subjects">
    </div>

    <textarea name="body" placeholder="Type your message here…"></textarea>

    <button type="submit">Send</button>
  </form>

  <datalist id="contacts"><option value="adalberto@example.net">Adalberto Deckow</option><option value="angle@example.com">Angle Skiles</option><option value="anisha@example.net">Anisha D'Amore</option><option value="anja@example.com">Anja Wilderman</option><option value="ariel@example.net">Ariel Ratke</option><option value="armand@example.org">Armand Hoeger</option><option value="arnita@example.com">Arnita Sanford</option><option value="aubrey@example.org">Aubrey Hammes</option><option value="augustus@example.com">Augustus Kirlin</option><option value="ayanna@example.net">Ayanna Gorczany</option><option value="benito@example.net">Benito Yundt</option><option value="brice@example.org">Brice Buckridge</option><option value="brice@example.net">Brice Zemlak</option><option value="bridgette@example.org">Bridgette Zieme</option><option value="brittani@example.org">Brittani Reinger</option><option value="broderick@example.net">Broderick Lubowitz</option><option value="candace@example.com">Candace Langosh</option><option value="candace@example.org">Candace Powlowski</option><option value="carlota@example.net">Carlota Treutel</option><option value="carmelia@example.net">Carmelia Leannon</option><option value="carson@example.org">Carson Beahan</option><option value="casey@example.org">Casey Denesik</option><option value="cassey@example.net">Cassey Altenwerth</option><option value="cedrick@example.com">Cedrick Senger</option><option value="charley@example.org">Charley Bergnaum</option><option value="clark@example.net">Clark Hodkiewicz</option><option value="cleta@example.com">Cleta O'Hara</option><option value="cordelia@example.org">Cordelia Kertzmann</option><option value="dana@example.org">Dana Mueller</option><option value="danny@example.org">Danny Glover</option><option value="darin@example.org">Darin Braun</option><option value="dave@example.org">Dave Ritchie</option><option value="dianne@example.com">Dianne Huel</option><option value="dionna@example.net">Dionna Barton</option><option value="dominic@example.net">Dominic Rodriguez</option><option value="dorsey@example.org">Dorsey Lind</option><option value="dwight@example.net">Dwight Weber</option><option value="earlie@example.org">Earlie Hahn</option><option value="elenor@example.org">Elenor Kreiger</option><option value="ezekiel@example.net">Ezekiel Wuckert</option><option value="felicita@example.com">Felicita Cummings</option><option value="floyd@example.org">Floyd Kunde</option><option value="francoise@example.org">Francoise Rutherford</option><option value="gale@example.com">Gale Quitzon</option><option value="georgia@example.net">Georgia Wisoky</option><option value="gudrun@example.com">Gudrun Swift</option><option value="halley@example.net">Halley Goodwin</option><option value="hallie@example.net">Hallie Kassulke</option><option value="hilario@example.net">Hilario Schneider</option><option value="hubert@example.net">Hubert Barrows</option><option value="jame@example.org">Jame Upton</option><option value="jerold@example.net">Jerold Hermann</option><option value="jeromy@example.org">Jeromy Wilkinson</option><option value="jesse@example.net">Jesse Conroy</option><option value="john@example.com">John Spinka</option><option value="jonathon@example.net">Jonathon Crist</option><option value="kristopher@example.net">Kristopher Hilpert</option><option value="launa@example.com">Launa Stoltenberg</option><option value="leon@example.org">Leon Gislason</option><option value="leonia@example.net">Leonia Langworth</option><option value="lewis@example.org">Lewis Sipes</option><option value="liliana@example.com">Liliana Okuneva</option><option value="magaly@example.org">Magaly Bode</option><option value="maranda@example.org">Maranda Oberbrunner</option><option value="maryln@example.org">Maryln Herzog</option><option value="mckinley@example.org">Mckinley Prosacco</option><option value="mercedes@example.com">Mercedes Ruecker</option><option value="michael@example.net">Michael Waters</option><option value="murray@example.com">Murray Klein</option><option value="napoleon@example.org">Napoleon Murray</option><option value="neil@example.com">Neil Carter</option><option value="nereida@example.org">Nereida Walter</option><option value="oscar@example.com">Oscar Kerluke</option><option value="pasty@example.com">Pasty Padberg</option><option value="pierre@example.net">Pierre Bruen</option><option value="quentin@example.com">Quentin Gulgowski</option><option value="ralph@example.org">Ralph Rice</option><option value="reynaldo@example.com">Reynaldo Wiegand</option><option value="rosamond@example.org">Rosamond Moore</option><option value="roy@example.net">Roy Wolff</option><option value="shawn@example.com">Shawn Hirthe</option><option value="tari@example.org">Tari Becker</option><option value="tawna@example.org">Tawna Shields</option><option value="tiera@example.org">Tiera Sauer</option><option value="toby@example.com">Toby DuBuque</option><option value="tosha@example.org">Tosha Stracke</option><option value="velda@example.com">Velda Jenkins</option><option value="vernon@example.net">Vernon Stiedemann</option><option value="weston@example.net">Weston Von</option><option value="wilfred@example.net">Wilfred Klocko</option><option value="yadira@example.com">Yadira Nicolas</option></datalist>
  <datalist id="recent-subjects"><option>Phased demand-driven capacity</option><option>Automated grid-enabled capacity</option><option>Sharable neutral collaboration</option><option>Do you want me to come with you</option><option>Down-sized systematic interface</option><option>User-friendly maximized time-frame</option><option>Focused system-worthy ability</option><option>Okay, I won't</option><option>Down-sized stable software</option><option>Team-oriented coherent complexity</option><option>I don't know</option><option>Optimized high-level portal</option><option>Polarised disintermediate benchmark</option><option>I wish I could go with you</option><option>Streamlined motivating strategy</option><option>I don't think they even heard me</option><option>Profit-focused non-volatile application</option><option>Fully-configurable real-time contingency</option><option>Pre-emptive holistic ability</option><option>Up-sized scalable frame</option><option>Visionary background access</option><option>Tape Seinfeld for me</option><option>Integrated intangible matrices</option><option>Universal multi-state collaboration</option><option>Right-sized local frame</option><option>Cross-platform tertiary forecast</option><option>Pre-emptive even-keeled groupware</option><option>Extended systematic collaboration</option><option>One! Two! Three</option><option>De-engineered high-level analyzer</option><option>Well, this is certainly a pleasant surprise</option><option>Vision-oriented regional hierarchy</option><option>Strike the tent</option><option>User-friendly multi-state policy</option><option>Organized composite matrices</option><option>Versatile zero tolerance productivity</option><option>Optional reciprocal model</option><option>Versatile zero administration service-desk</option></datalist>
</body>
</html>
	Chrome	Firefox	Safari
Displays `<option>` values	✓	✗	✓
Displays `<option>` labels	✓	✓	✗
Matches `<option>` values	✓	✗	✓
Matches `<option>` labels	✓	✓	✗
Commits `<option>` on `Tab`	✓	✓	✗
Commits `<option>` on `Enter`	✓	✓	✓
	<!doctype html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>New Message</title>
	<style>*,::after,::before{margin:0;padding:0;box-sizing:border-box}:focus{outline:0}body{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;font-size:16px;color:rgba(40,33,56);line-height:1.5;padding:2rem}form{max-width:40rem;margin:0 auto;padding:2rem;border-radius:1rem;box-shadow:0 .25rem 1.5rem .75rem rgba(173,174,179,.18)}label{margin:.2rem 1rem 0 0}button,input,textarea{line-height:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;color:inherit;background:inherit;padding:.2rem .4rem;border:0}input[list]::-webkit-calendar-picker-indicator,input[list]::-webkit-list-button{display:none}textarea{width:100%;min-height:8rem;margin:.5rem 0;resize:none}button{cursor:pointer;color:#747480}button:focus{box-shadow:0 0 0 2px highlight}[type=submit]{cursor:pointer;font-weight:500;line-height:2;padding:0 .6rem;border-radius:1rem;background-color:#0f8287;color:#fff}.row{display:flex;border-bottom:1px solid #eaeaea;padding:.5rem}.row input,.row textarea{flex-grow:1}</style><script>addEventListener("click",({target:a})=>{if(a.hasAttribute("data-show-cc-fields")){const b=document.getElementById("cc-fields");b.replaceWith(b.content),document.getElementById("cc").focus(),a.remove()}})</script>

	<style>
	/* Your CSS */
	</style>

	<script>
	/* Your JavaScript */
	</script>

	</head>
	<body>
	<form>
	<div class="row">
	<label for="to">To</label>
	<input type="email" name="to" id="to" list="contacts" multiple required autofocus>
	<button type="button" tabindex="-1" data-show-cc-fields>Cc / Bcc</button>
	</div>

	<template id="cc-fields">
	<div class="row">
	<label for="cc">Cc</label>
	<input type="email" name="cc" id="cc" list="contacts" multiple>
	</div>
	<div class="row">
	<label for="bcc">Bcc</label>
	<input type="email" name="bcc" id="bcc" list="contacts" multiple>
	</div>
	</template>

	<div class="row">
	<label for="subject">Subject</label>
	<input type="text" name="subject" id="subject" list="recent-subjects">
	</div>

	<textarea name="body" placeholder="Type your message here…"></textarea>

	<button type="submit">Send</button>
	</form>

	<datalist id="contacts"><option value="adalberto@example.net">Adalberto Deckow</option><option value="angle@example.com">Angle Skiles</option><option value="anisha@example.net">Anisha D'Amore</option><option value="anja@example.com">Anja Wilderman</option><option value="ariel@example.net">Ariel Ratke</option><option value="armand@example.org">Armand Hoeger</option><option value="arnita@example.com">Arnita Sanford</option><option value="aubrey@example.org">Aubrey Hammes</option><option value="augustus@example.com">Augustus Kirlin</option><option value="ayanna@example.net">Ayanna Gorczany</option><option value="benito@example.net">Benito Yundt</option><option value="brice@example.org">Brice Buckridge</option><option value="brice@example.net">Brice Zemlak</option><option value="bridgette@example.org">Bridgette Zieme</option><option value="brittani@example.org">Brittani Reinger</option><option value="broderick@example.net">Broderick Lubowitz</option><option value="candace@example.com">Candace Langosh</option><option value="candace@example.org">Candace Powlowski</option><option value="carlota@example.net">Carlota Treutel</option><option value="carmelia@example.net">Carmelia Leannon</option><option value="carson@example.org">Carson Beahan</option><option value="casey@example.org">Casey Denesik</option><option value="cassey@example.net">Cassey Altenwerth</option><option value="cedrick@example.com">Cedrick Senger</option><option value="charley@example.org">Charley Bergnaum</option><option value="clark@example.net">Clark Hodkiewicz</option><option value="cleta@example.com">Cleta O'Hara</option><option value="cordelia@example.org">Cordelia Kertzmann</option><option value="dana@example.org">Dana Mueller</option><option value="danny@example.org">Danny Glover</option><option value="darin@example.org">Darin Braun</option><option value="dave@example.org">Dave Ritchie</option><option value="dianne@example.com">Dianne Huel</option><option value="dionna@example.net">Dionna Barton</option><option value="dominic@example.net">Dominic Rodriguez</option><option value="dorsey@example.org">Dorsey Lind</option><option value="dwight@example.net">Dwight Weber</option><option value="earlie@example.org">Earlie Hahn</option><option value="elenor@example.org">Elenor Kreiger</option><option value="ezekiel@example.net">Ezekiel Wuckert</option><option value="felicita@example.com">Felicita Cummings</option><option value="floyd@example.org">Floyd Kunde</option><option value="francoise@example.org">Francoise Rutherford</option><option value="gale@example.com">Gale Quitzon</option><option value="georgia@example.net">Georgia Wisoky</option><option value="gudrun@example.com">Gudrun Swift</option><option value="halley@example.net">Halley Goodwin</option><option value="hallie@example.net">Hallie Kassulke</option><option value="hilario@example.net">Hilario Schneider</option><option value="hubert@example.net">Hubert Barrows</option><option value="jame@example.org">Jame Upton</option><option value="jerold@example.net">Jerold Hermann</option><option value="jeromy@example.org">Jeromy Wilkinson</option><option value="jesse@example.net">Jesse Conroy</option><option value="john@example.com">John Spinka</option><option value="jonathon@example.net">Jonathon Crist</option><option value="kristopher@example.net">Kristopher Hilpert</option><option value="launa@example.com">Launa Stoltenberg</option><option value="leon@example.org">Leon Gislason</option><option value="leonia@example.net">Leonia Langworth</option><option value="lewis@example.org">Lewis Sipes</option><option value="liliana@example.com">Liliana Okuneva</option><option value="magaly@example.org">Magaly Bode</option><option value="maranda@example.org">Maranda Oberbrunner</option><option value="maryln@example.org">Maryln Herzog</option><option value="mckinley@example.org">Mckinley Prosacco</option><option value="mercedes@example.com">Mercedes Ruecker</option><option value="michael@example.net">Michael Waters</option><option value="murray@example.com">Murray Klein</option><option value="napoleon@example.org">Napoleon Murray</option><option value="neil@example.com">Neil Carter</option><option value="nereida@example.org">Nereida Walter</option><option value="oscar@example.com">Oscar Kerluke</option><option value="pasty@example.com">Pasty Padberg</option><option value="pierre@example.net">Pierre Bruen</option><option value="quentin@example.com">Quentin Gulgowski</option><option value="ralph@example.org">Ralph Rice</option><option value="reynaldo@example.com">Reynaldo Wiegand</option><option value="rosamond@example.org">Rosamond Moore</option><option value="roy@example.net">Roy Wolff</option><option value="shawn@example.com">Shawn Hirthe</option><option value="tari@example.org">Tari Becker</option><option value="tawna@example.org">Tawna Shields</option><option value="tiera@example.org">Tiera Sauer</option><option value="toby@example.com">Toby DuBuque</option><option value="tosha@example.org">Tosha Stracke</option><option value="velda@example.com">Velda Jenkins</option><option value="vernon@example.net">Vernon Stiedemann</option><option value="weston@example.net">Weston Von</option><option value="wilfred@example.net">Wilfred Klocko</option><option value="yadira@example.com">Yadira Nicolas</option></datalist>
	<datalist id="recent-subjects"><option>Phased demand-driven capacity</option><option>Automated grid-enabled capacity</option><option>Sharable neutral collaboration</option><option>Do you want me to come with you</option><option>Down-sized systematic interface</option><option>User-friendly maximized time-frame</option><option>Focused system-worthy ability</option><option>Okay, I won't</option><option>Down-sized stable software</option><option>Team-oriented coherent complexity</option><option>I don't know</option><option>Optimized high-level portal</option><option>Polarised disintermediate benchmark</option><option>I wish I could go with you</option><option>Streamlined motivating strategy</option><option>I don't think they even heard me</option><option>Profit-focused non-volatile application</option><option>Fully-configurable real-time contingency</option><option>Pre-emptive holistic ability</option><option>Up-sized scalable frame</option><option>Visionary background access</option><option>Tape Seinfeld for me</option><option>Integrated intangible matrices</option><option>Universal multi-state collaboration</option><option>Right-sized local frame</option><option>Cross-platform tertiary forecast</option><option>Pre-emptive even-keeled groupware</option><option>Extended systematic collaboration</option><option>One! Two! Three</option><option>De-engineered high-level analyzer</option><option>Well, this is certainly a pleasant surprise</option><option>Vision-oriented regional hierarchy</option><option>Strike the tent</option><option>User-friendly multi-state policy</option><option>Organized composite matrices</option><option>Versatile zero tolerance productivity</option><option>Optional reciprocal model</option><option>Versatile zero administration service-desk</option></datalist>
	</body>
	</html>