Name Picker

public/index.html

@@ -68,12 +68,16 @@
   <section class="screen" id="screen-guest-host" data-step="2">
     <div class="rail" data-rail></div>
     <h2>Who are you here to see?</h2>
+    <p class="hint">Type the first few letters of their name. Their name will appear below —
+      tap it.</p>
     <label class="field">
-      <span>Start typing a name to narrow the list</span>
-      <input id="in-host-search" autocomplete="off" enterkeyhint="search" placeholder="e.g. Rogerson">
+      <span>Their name</span>
+      <input id="in-host-search" autocomplete="off" enterkeyhint="search"
+             placeholder="e.g. Smi for Smith">
     </label>
-    <label class="field">
-      <span>Then choose a name</span>
+    <div class="host-list" id="host-list" role="list" hidden></div>
+    <label class="field" id="host-select-field">
+      <span id="host-select-label">Or pick from the full list</span>
       <select id="host-select" class="picker"></select>
     </label>
     <p class="host-empty" id="host-empty" hidden></p>
@@ -171,12 +175,16 @@
   <!-- --------------------------------------------- recurring: host -->
   <section class="screen" id="screen-freq-host">
     <h2 id="freq-greeting">Who are you here to see?</h2>
+    <p class="hint">Type the first few letters of their name. Their name will appear below —
+      tap it.</p>
     <label class="field">
-      <span>Start typing a name to narrow the list</span>
-      <input id="in-freq-host-search" autocomplete="off" enterkeyhint="search">
+      <span>Their name</span>
+      <input id="in-freq-host-search" autocomplete="off" enterkeyhint="search"
+             placeholder="e.g. Smi for Smith">
     </label>
-    <label class="field">
-      <span>Then choose a name</span>
+    <div class="host-list" id="freq-host-list" role="list" hidden></div>
+    <label class="field" id="freq-host-select-field">
+      <span id="freq-host-select-label">Or pick from the full list</span>
       <select id="freq-host-select" class="picker"></select>
     </label>
     <p class="host-empty" id="freq-host-empty" hidden></p>