Autocomplete text input

Question

I know there are a lot of JavaScript solutions, but is there an HTML5 method of having a text input with autocomplete? The datalist element is almost what I'm after, except it allows you to enter custom values rather than limiting you to what's in the list.

Answer 1

You should try the datalist element. It's clearly defined in W3C HTML5 Recommendation, probably the best option on the desk for now and near future.

The datalist element is hooked up to an input element using the list attribute on the input element.

Each option element that is a descendant of the datalist element, that is not disabled, and whose value is a string that isn't the empty string, represents a suggestion. Each suggestion has a value and a label.

Google chrome and chromium based browsers supports it since v21.x (As of Dec 2014, current version is 39, check compatibility status of other browsers here) Firefox and Opera also supports for a long time. Modern(!) IE versions partially supports datalist.

Demo: A great working datalist implementation by Eiji Kitamura.

Polyfill : Also check out the RelevantDropdown. It's a HTML5 datalist polyfill that depends on jQuery and Modernizr.

Try to run this example:

<input type="search" list="languages" placeholder="Pick a programming language..">

<datalist id="languages">
  <option value="PHP" />
  <option value="C++" />
  <option value="Java" />
  <option value="Ruby" />
  <option value="Python" />
  <option value="Go" />
  <option value="Perl" />
  <option value="Erlang" />
</datalist>

W3 reference: https://www.w3.org/TR/html5/forms.html#the-datalist-element

Answer 2

HTML5 has an autocomplete attribute which can be specified as either on or off in a field.

Here's an example:

<form action="/form.php" autocomplete="on">
  First name:<input type="text" name="first_name"><br>
  Last name: <input type="text" name="last_name"><br>
  E-mail: <input type="email" name="email" autocomplete="off">
  <input type="submit">
</form>

The way it works is that the values that you submit the first time will be suggested to you on subsequent times you visit this page on keyup of each field.

• The key issue in deciding to use this feature is one of browser compatibility. Your best bet is checking multiple browsers to make sure it works. caniuse.com makes the support looks pretty bad, but I don't see any harm it using it to help those who have modern browers.

Other factoids about autocomplete from W3Schools, don't hate in this case as it does cover the basics:

• When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
• It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
• The autocomplete attribute works with and the following types: text, search, url, tel, email, password, datepickers, range, and color.

Answer 3

This question is pretty old but I have an updated answer for 2017!

Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.

The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153

All you have to do now to trigger autocomplete is to name your input tag correctly.

Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!

How to Enable AutoComplete on your HTML forms

Here are some key points on how to enable autocomplete:

• Use a <label> for all your <input> fields
• Add a autocomplete attribute to your <input> tags and fill it in using this guide.
• Name your name and autocomplete attributes correctly for all <input> tags

• Example:

  <label for="frmNameA">Name</label>
  <input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">
  
  <label for="frmEmailA">Email</label>
  <input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">
  

How to name your <input> tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.

Here's how to name your inputs:

• Name
  • Use any of these for name: name fname mname lname
  • Use any of these for autocomplete:
    • name (for full name)
    • given-name (for first name)
    • additional-name (for middle name)
    • family-name (for last name)
  • Example: <input type="text" name="fname" autocomplete="given-name">
• Email
  • Use any of these for name: email
  • Use any of these for autocomplete: email
  • Example: <input type="text" name="email" autocomplete="email">
• Address
  • Use any of these for name: address city region province state zip zip2 postal country
  • Use any of these for autocomplete:
    • For one address input:
      • street-address
    • For two address inputs:
      • address-line1
      • address-line2
    • address-level1 (state or province)
    • address-level2 (city)
    • postal-code (zip code)
    • country
• Phone
  • Use any of these for name: phone mobile country-code area-code exchange suffix ext
  • Use any of these for autocomplete: tel
• Credit Card
  • Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Use any of these for autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Usernames
  • Use any of these for name: username
  • Use any of these for autocomplete: username
• Passwords
  • Use any of these for name: password
  • Use any of these for autocomplete:
    • current-password (for sign-in forms)
    • new-password (for sign-up and password-change forms)

Resources

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
• "Help Users Checkout Faster with Autofill" from Google in 2015.

Answer 4

With HTML5, a google suggest style autocomplete input is possible without any Javascript!

See this article: An HTML5-style "Google Suggest"

However, it is not yet fully supported enough. The examples from the article will only work in Opera at the moment.

For now, it is probably best to just use a well-tested library with broad browser support like JQuery UI, which has an Autocomplete widget.

Answer 5

I have used an input type="search" for this. The user can choose from matches or just ignore the matches and enter custom text as they see fit.

Rather than hard code the options, I have used an array of strings and built the datalist with JavaScript.

  let wordArray = ["aardvark", "bird", "cat", "dog", "elephant", "finch"];
  let str = "";
  for (word of wordArray) {
    str += "<option value=" + word + " />";
  }
  document.getElementById("myWords").innerHTML = str;

<input id="myInput" type="search" list="myWords" placeholder="try typing words"/>
<datalist id="myWords"></datalist>