下拉框中選項的快速定位

<table class="d-block"> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body">

<p>對於選項不少的下拉框 <code>&lt;select&gt;</code>，人工定位到想要的項目是很費勁的。瀏覽器其實原生支持下拉選擇框根據鍵盤輸入自動定位到相應條目的。</p> <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/3783096/56429810-ce0dd280-62f6-11e9-9930-87c443870ae0.gif"><img src="https://user-images.githubusercontent.com/3783096/56429810-ce0dd280-62f6-11e9-9930-87c443870ae0.gif" alt="經過輸入條目字母定位到下拉框中條目的位置" style="max-width:100%;"></a></p> <p align="center">經過輸入條目字母定位到下拉框中條目的位置</p> <p>方即是方便，有個問題是連續輸入不能間隔過久，這個間隔實測中感覺是很是短的，若是想找的條目比較難輸入，就沒法在短期內完成這個操做。</p> <p>那有沒有相應 API 修改這個間隔時間呢？<a href="https://stackoverflow.com/questions/33309866/html-select-keystroke-timeout" rel="nofollow">不能</a>，至少我還沒找到。</p> <h2><code>&lt;datalist&gt;</code></h2> <p>其實 HTML5 中提供了另一個元素，<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist" rel="nofollow"><code>&lt;datalist&gt;</code></a>。用它結合一個文本輸入框可實現 Combo box 的效果，即根據輸入自動篩選列表中的元素。</p> <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>names<span class="pl-pds">"</span></span> <span class="pl-e">list</span>=<span class="pl-s"><span class="pl-pds">"</span>nameList<span class="pl-pds">"</span></span> /&gt; &lt;<span class="pl-ent">datalist</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>nameList<span class="pl-pds">"</span></span>&gt; &lt;<span class="pl-ent">option</span> <span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>Larhonda Trentham<span class="pl-pds">"</span></span>&gt;Larhonda Trentham&lt;/<span class="pl-ent">option</span>&gt; &lt;<span class="pl-ent">option</span> <span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>Nicola Madigan<span class="pl-pds">"</span></span>&gt;Nicola Madigan&lt;/<span class="pl-ent">option</span>&gt; ... &lt;/<span class="pl-ent">datalist</span>&gt;</pre></div> <p>建立 <code>&lt;datalist&gt;</code> 元素並指定 <code>id</code> 值，同時將候選項放入 <code>&lt;option&gt;</code> 做爲其子元素。而後爲輸入框指定 <code>list</code> 屬性，值即是 <code>&lt;datalist&gt;</code> 的 <code>id</code>。</p> <p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/3783096/56429936-39f03b00-62f7-11e9-8fae-34547af7dcbc.gif"><img src="https://user-images.githubusercontent.com/3783096/56429936-39f03b00-62f7-11e9-8fae-34547af7dcbc.gif" alt="利用 HTML5 datalist 元素實現 combbox" style="max-width:100%;"></a></p> <p align="center">經過輸入條目字母定位到下拉框中條目的位置</p> <h2>瀏覽器兼容性</h2> <p>IE10+ 可安心食用，詳情參見 <a href="https://github.com/mdn/browser-compat-data/blob/master/html/elements/datalist.json">MDN 的數據</a>。</p> <h2>相關資源</h2> <ul> <li><a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist" rel="nofollow">MDN - <code>&lt;datalist&gt;</code></a></li> <li><a href="https://stackoverflow.com/questions/33309866/html-select-keystroke-timeout" rel="nofollow">StackOverflow - Html select keystroke timeout</a></li> </ul> </td> </tr> </tbody> </table>