Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

第 106 期(W3C标准-HTML):原生HTML实现输入框下拉补全提示 #109

Copy link
Copy link
@wingmeng

Description

@wingmeng
Issue body actions

输入框自动填充(或称输入框自动补全提示),是一种常见的提升用户体验的输入组件,其特点是用户在自由输入的同时会有一些建议选项可供快速补全输入,常见于搜索场景。

传统方法实现这个功能,需要编写大量的 JS 代码。如果我们利用 HTML5 中的 <datalist> 则可以使用纯 HTML 实现这个功能。

<input type="text" list="language">
<datalist id="language">
  <option value="Java">
  <option value="C">
  <option value="Python">
  <option value="C++">
  <option value="C#">
  <option value=".NET">
  <option value="JavaScript">
  <option value="PHP">
  <option value="Objective-C">
  <option value="SQL">
  <option value="Ruby">
  <option value="MATLAB">
  <option value="Groovy">
  <option value="Delphi/Object Pascal">
  <option value="Assembly language">
  <option value="Visual Basic">
  <option value="Go">
  <option value="Swift">
  <option value="Perl">
  <option value="R">
</datalist>

效果:

image

还可以为下拉补全列表的每一项设置“副标题”,例如:

<option value="Java" label="占有率:16.028%">

效果:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.