下拉框中选项的快速定位

<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>