亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Table of Contents
Key Takeaways
Quick Start
Browser Support and Fallbacks
CSS Styling
How datalist-ajax works
FAQs About Lightweight Autocomplete Controls with the HTML5 Datalist
What is the HTML5 datalist element and how does it work?
How can I use the HTML5 datalist for autocomplete?
Can I use the HTML5 datalist element in all browsers?
How can I style the HTML5 datalist options?
Can I use multiple datalists for a single input field?
Can I use the HTML5 datalist with other input types?
Can I use the HTML5 datalist with a select element?
Can I use JavaScript with the HTML5 datalist?
Can I use the HTML5 datalist for a search field?
Can I use the HTML5 datalist with a textarea?
Home Web Front-end CSS Tutorial Lightweight Autocomplete Controls with the HTML5 Datalist

Lightweight Autocomplete Controls with the HTML5 Datalist

Feb 10, 2025 pm 03:18 PM

Lightweight Autocomplete Controls with the HTML5 Datalist

In this tutorial, we’ll take a deep-dive into the little-used HTML5 element. It can implement a lightweight, accessible, cross-browser autocomplete form control that doesn’t require JavaScript.

Key Takeaways

  • The HTML5 `` element offers a lightweight, accessible, and cross-browser solution for autocomplete form controls without relying on JavaScript.
  • Unlike `
  • Browser support for `` is robust in modern browsers including Internet Explorer 10 and 11, with fallback options available for older browsers using a combination of `
  • The `` element cannot be styled directly with CSS, which limits customization but ensures consistency across different browsers and platforms.
  • Enhancements such as AJAX can be integrated with `` to dynamically populate options based on user input, improving functionality and user experience in applications requiring real-time data feedback.

What’s Wrong with

HTML5

  • there are lots of options, such as countries or job titles
  • the user wants to enter their own option which is not on the list

The obvious solution is an autocomplete control. This allows the user to enter a few characters, which limits the options available for quicker selection.

Developers often turn to one of the many JavaScript-powered solutions, but a custom autocomplete control is not always necessary. The HTML5 element is lightweight, accessible, and has no JavaScript dependencies. You may have heard it’s buggy or lacks support. That’s not true in 2021, but there are browser inconsistencies and caveats.

Quick Start

Picking your country from a list containing more than 200 options is an ideal candidate for an autocomplete control. Define a with child 

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>?land Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

The datalist’s id can then be referenced by a list attribute in any field:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

Confusingly, it’s best to set autocomplete="off". This ensures the user is shown values in the but not values they previously entered in the browser.

The result:

Lightweight Autocomplete Controls with the HTML5 Datalist

This is the default rendering in Microsoft Edge. Other applications implement similar functionality, but the look differs across platforms and browsers.

Using the label as a text child of an 

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>?land Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

Using a value attribute produces identical results:

<span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

Note: the closing /> slash is optional in HTML5, although it could help prevent coding errors.

You can also set a value according to a chosen label using either of the following formats.

Option 1:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

Option 2:

<span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</span>></span>
</span>

In both cases, the input field is set to 1, 2 or 3 when a valid option is chosen, but the UI varies across browsers:

  • Chrome shows a list with both the value and the label. Only the value remains once an option is chosen.
  • Firefox shows a list with the label only. It switches to the value once an option is chosen.
  • Edge shows the value only.

The following CodePen example shows all variations:

See the Pen
HTML5 autocomplete examples by SitePoint (@SitePoint)
on CodePen.

Implementations will evolve but, for now, I’d advise you do not use a value and label since it’s likely to confuse users. (A workaround is discussed below.)

Browser Support and Fallbacks

The element is well supported in modern browsers as well as Internet Explorer 10 and 11:

Lightweight Autocomplete Controls with the HTML5 Datalist

There are several implementation notes, but they won’t affect most usage. The worst that could happen is a field reverts to a standard text input.

If you absolutely must support IE9 and below, there’s a fallback pattern which uses a standard 

<span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>?land Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

See the Pen
HTML5 autocomplete fallback by SitePoint (@SitePoint)
on CodePen.

In modern browsers, the

In IE9 and below, both the (very long)

Lightweight Autocomplete Controls with the HTML5 Datalist

Both values could be entered in old IEs. Your application must either:

  • decide which is most valid, or
  • use a small JavaScript function to reset one when the other is changed

Using on Non-text Controls

Chrome-based browsers can also apply values to:

  1. An input with the type of "date". The user can choose from a range of options defined as YYYY-MM-DD values but presented in their locale format.

  2. An input with the type of "color". The user can choose from a selection of color options defined as six-digit hex values (three-digit values don’t work).

  3. An input with a type of "range". The slider shows tick marks, although this doesn’t limit which value can be entered.

See the Pen
HTML5 on other input types by SitePoint (@SitePoint)
on CodePen.

CSS Styling

If you ever struggled styling a

An can be styled as normal, but a linked and its child

I hope this situation improves, but for now, a solution is proposed at MDN which:

  1. overrides the default browser behavior
  2. effectively treats the like a
    so it can be styled in CSS
  3. replicates all autocomplete functionality in JavaScript

    4. I’ve enhanced it further and the code is available on GitHub. To use it, load the script anywhere in your HTML page as an ES6 module. The jsDelivr CDN URL can be used:

    <span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>?land Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

    Or you can install it with npm if you’re using a bundler:

    <span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

    Your elements must use the format. For example:

    <span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

    Note: can’t be used, since it results in an empty element that can’t be styled!

    CSS can then be added to style some or all and 

    <span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span> value<span>="label one"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label two"</span> /></span>
</span>  <span><span><span><option</span> value<span>="label three"</span> /></span>
</span><span><span><span></datalist</span>></span>
</span>

    Example:

    See the Pen
    HTML5 autocomplete CSS styling by SitePoint (@SitePoint)
    on CodePen.

    Styling works, but is it worth the effort? I suspect not …

    • Re-implementing the browser’s standard keyboard, mouse, and touch controls with reasonable accessibility is difficult. The MDN example doesn’t support keyboard events and, while I tried to improve it, there will inevitably be issues on some devices.
    • You’re relying on 200 lines of JavaScript to solve a CSS problem. It minifies to 1.5kB, but could introduce performance issues if you required many long elements on the same page.
    • If JavaScript is a requirement, would it be preferable to use a prettier, more consistent, battle-tested JavaScript component?

    The control falls back to a standard HTML5 without styling when JavaScript fails, but that’s a minor benefit.

    Creating an Ajax-enhanced

    Presuming your designer is happy to accept browser styling differences, it’s possible to enhance standard functionality using JavaScript. For example:

    1. Implement optional validation which only accepts a known value in the .
    2. Set
    3. Set other field values when an option is chosen. For example, selecting “United States of America” sets “US” in a hidden input.

    The code primarily needs to redefine

    • An Ajax API request should only occur once a minimum number of characters has been entered.
    • Typing events should be debounced. That is, an Ajax call is only triggered once the user has stopped typing for at least half a second.
    • Query results should be cached so it’s not necessary to repeat or parse identical calls.
    • Unnecessary queries should be avoided. For example, entering “un” returns 12 countries. There’s no need to make further Ajax calls for “unit” or “united” because all the resulting options are contained in the original 12 results.

    I’ve created a standard Web Component for this, and the code is available on GitHub. The CodePen example below allows you to select a valid country after entering at least two characters. A music artist autocomplete then returns artists who originated in that country with names matching the search string:

    See the Pen
    HTML5 with Ajax autocomplete by SitePoint (@SitePoint)
    on CodePen.

    • The country look-up API is provided by restcountries.eu.
    • The music artist look-up API is provided by musicbrainz.org.

    To use it in your own application, load the script anywhere in your HTML page as an ES6 module. The jsDelivr CDN URL can be used:

    <span><span><span><datalist</span> id<span>="countrydata"</span>></span>
</span>  <span><span><span><option</span>></span>Afghanistan<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>?land Islands<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Albania<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Algeria<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>American Samoa<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Andorra<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Angola<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Anguilla<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>Antarctica<span><span></option</span>></span>
</span>  ...etc...
<span><span><span></datalist</span>></span>
</span>

    Or you can install it with npm if you’re using a bundler:

    <span><span><span><label</span> for<span>="country"</span>></span>country<span><span></label</span>></span>
</span>
<span><span><span><input</span> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span>

    Create an element with a child to use as the data-entry field. For example, the country lookup uses this:

    <span><span><span><datalist</span> id<span>="mylist"</span>></span>
</span>  <span><span><span><option</span>></span>label one<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label two<span><span></option</span>></span>
</span>  <span><span><span><option</span>></span>label three<span><span></option</span>></span>
</span><span><span><span></datalist</span>></span>
</span>

    element attributes:

    attribute description api the REST API URL (required) resultdata the name of the property containing a result array of objects in the returned API JSON (not required if only results are returned) resultname the name of the property in each result object which matches the search input and is used for datalist

The above is the detailed content of Lightweight Autocomplete Controls with the HTML5 Datalist. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

CSS tutorial for creating loading spinners and animations CSS tutorial for creating loading spinners and animations Jul 07, 2025 am 12:07 AM

There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

Addressing CSS Browser Compatibility issues and prefixes Addressing CSS Browser Compatibility issues and prefixes Jul 07, 2025 am 01:44 AM

To deal with CSS browser compatibility and prefix issues, you need to understand the differences in browser support and use vendor prefixes reasonably. 1. Understand common problems such as Flexbox and Grid support, position:sticky invalid, and animation performance is different; 2. Check CanIuse confirmation feature support status; 3. Correctly use -webkit-, -moz-, -ms-, -o- and other manufacturer prefixes; 4. It is recommended to use Autoprefixer to automatically add prefixes; 5. Install PostCSS and configure browserslist to specify the target browser; 6. Automatically handle compatibility during construction; 7. Modernizr detection features can be used for old projects; 8. No need to pursue consistency of all browsers,

What is the difference between display: inline, display: block, and display: inline-block? What is the difference between display: inline, display: block, and display: inline-block? Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

Styling visited links differently with CSS Styling visited links differently with CSS Jul 11, 2025 am 03:26 AM

Setting the style of links you have visited can improve the user experience, especially in content-intensive websites to help users navigate better. 1. Use CSS's: visited pseudo-class to define the style of the visited link, such as color changes; 2. Note that the browser only allows modification of some attributes due to privacy restrictions; 3. The color selection should be coordinated with the overall style to avoid abruptness; 4. The mobile terminal may not display this effect, and it is recommended to combine it with other visual prompts such as icon auxiliary logos.

Creating custom shapes with css clip-path Creating custom shapes with css clip-path Jul 09, 2025 am 01:29 AM

Use the clip-path attribute of CSS to crop elements into custom shapes, such as triangles, circular notches, polygons, etc., without relying on pictures or SVGs. Its advantages include: 1. Supports a variety of basic shapes such as circle, ellipse, polygon, etc.; 2. Responsive adjustment and adaptable to mobile terminals; 3. Easy to animation, and can be combined with hover or JavaScript to achieve dynamic effects; 4. It does not affect the layout flow, and only crops the display area. Common usages are such as circular clip-path:circle (50pxatcenter) and triangle clip-path:polygon (50%0%, 100 0%, 0 0%). Notice

What is the CSS Painting API? What is the CSS Painting API? Jul 04, 2025 am 02:16 AM

TheCSSPaintingAPIenablesdynamicimagegenerationinCSSusingJavaScript.1.DeveloperscreateaPaintWorkletclasswithapaint()method.2.TheyregisteritviaregisterPaint().3.ThecustompaintfunctionisthenusedinCSSpropertieslikebackground-image.Thisallowsfordynamicvis

How to create responsive images using CSS? How to create responsive images using CSS? Jul 15, 2025 am 01:10 AM

To create responsive images using CSS, it can be mainly achieved through the following methods: 1. Use max-width:100% and height:auto to allow the image to adapt to the container width while maintaining the proportion; 2. Use HTML's srcset and sizes attributes to intelligently load the image sources adapted to different screens; 3. Use object-fit and object-position to control image cropping and focus display. Together, these methods ensure that the images are presented clearly and beautifully on different devices.

What are common CSS browser inconsistencies? What are common CSS browser inconsistencies? Jul 26, 2025 am 07:04 AM

Different browsers have differences in CSS parsing, resulting in inconsistent display effects, mainly including the default style difference, box model calculation method, Flexbox and Grid layout support level, and inconsistent behavior of certain CSS attributes. 1. The default style processing is inconsistent. The solution is to use CSSReset or Normalize.css to unify the initial style; 2. The box model calculation method of the old version of IE is different. It is recommended to use box-sizing:border-box in a unified manner; 3. Flexbox and Grid perform differently in edge cases or in old versions. More tests and use Autoprefixer; 4. Some CSS attribute behaviors are inconsistent. CanIuse must be consulted and downgraded.

See all articles