FORM INPUT Autocomplete

Present recommended choices for text input

Autocomplete Approaches

Both approaches can be sourced from a Webflow Collection List.

HTML5's <datalist> approach;

  • Built into HTML5.
  • + Displays immediately on entering the field.
  • - No formatting abilities.
  • - On Chrome, appears in a somewhat weird position.
  • - Adds a dropdown icon on hover, which doesn't look very nice.

jQuery's autocomplete;

  • + Aligns well
  • Only appears when text is partially matching the input list.

DEMO

Below are two variations on text INPUT autocomplete. The first uses HTML5's <datalist>, and the second uses jQuery's autocomplete.
Type into either of the lists to see autocomplete in action. Both use the same source list.

HTML5 <datalist> ( built from Collection List )

Examine the Collection List here to see its custom attributes, organization, and HTML Embed contents.

JS Options Array ( built from Collection List )

Examine the Collection List here to see its custom attributes, organization, and HTML Embed contents.

5 Great Web Design Resources
5 Web Design Blogs You Should Be Reading
15 Best Blogs To Follow About Web Design
10 Web Design Blogs You Can't Miss
7 of the Best Examples of Beautiful Blog Design
The History Of Web Design
What Will Website Be Like In 100 Years?
20 Myths About Web Design
Why We Love Webflow (And You Should, Too!)
14 Common Misconceptions About Web Design
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

How to implement

See the designer view of this demonstration by clicking the button at the top.
Then view this part of the layout for details;

01 The basic process

Coming soon.