Saisie de texte autocomplète

je sais qu'il y a beaucoup de solutions JavaScript, mais y a-t-il une méthode HTML5 pour avoir une entrée de texte avec autocomplete? L'élément datalist est presque ce que je cherche, sauf qu'il vous permet d'entrer des valeurs personnalisées plutôt que de vous limiter à ce qui est dans la liste.

27
demandé sur Alexander Abakumov 2012-11-26 20:07:54

5 réponses

HTML5 a un autocomplete attribut qui peut être spécifié comme on ou off dans un champ.

Voici un exemple:

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

La façon dont cela fonctionne est que les valeurs que vous soumettez la première fois vous sera proposé pour vous sur les prochaines fois que vous visitez cette page sur keyup de chaque champ.

  • la question en décidant d'utiliser cette fonctionnalité est celle de la compatibilité du navigateur. Votre meilleur pari est de vérifier plusieurs navigateurs pour vérifier qu'il fonctionne. caniuse.com fait que le support semble assez mauvais, mais je ne vois aucun mal à l'utiliser pour aider ceux qui ont des browers modernes.

autres faits à propos de autocomplete W3Schools, n'est pas de la haine dans ce cas, car il couvre les notions de base:

  • lorsque autocomplete est activé, le navigateur remplit automatiquement les valeurs fondée sur des valeurs que l'utilisateur a entré avant.
  • Il est possible de avoir la saisie semi-automatique "sur" pour la forme, et "off" pour entrée spécifique fields, ou vice versa.
  • L'attribut autocomplete fonctionne avec et les types suivants: texte, recherche, url, tel, email, mot de passe, lecteurs de données, portée et couleur.
13
répondu tim peterson 2013-03-09 20:46:23

vous devriez essayer le datalist élément. C'est clairement définie dans W3C HTML5 recommandation, probablement la meilleure option sur le bureau pour maintenant et dans un futur proche.

l'élément datalist est relié à un entrée élément utilisant la liste l'attribut de l'élément d'entrée.

chaque élément d'option qui est un descendant de l'élément dataliste, qui n'est pas désactivé, et dont la valeur est une chaîne qui n'est pas le vide chaîne, représente une suggestion. Chaque suggestion a un valeur et un étiquette.

Google chrome et chrome les navigateurs basés le supportent depuis v21.x (à partir de décembre 2014, la version actuelle est 39, vérifier l'état de compatibilité de les autres navigateurs ici) Firefox et Opéra supporte aussi depuis longtemps. Moderne(!) IE versions prend partiellement en charge datalist.

Démo: Un travail datalist mise en œuvre par Eiji Kitamura.

Polyfill: voir aussi le RelevantDropdown. C'est un polyfill dataliste HTML5 qui dépend de jQuery et Modernizr.

Essayez d'exécuter cet exemple:

<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 référence:https://www.w3.org/TR/html5/forms.html#the-datalist-element

52
répondu edigu 2016-08-25 08:37:23

cette question est assez ancienne mais j'ai un mise à jour de réponse pour 2017!

Voici un lien officiel norme HTML WHATWG actuelle pour activer autocomplete.

La réponse suivante est de ma réponse originale à cette question à partir d'ici: https://stackoverflow.com/a/41965106/1696153

Tout ce que vous avez à faire maintenant pour déclencher autocomplete est le nom de votre input balise correctement.

Google a écrit un très joli guide pour le développement d'applications web conviviales pour les appareils mobiles. Ils ont une section sur la façon de nommer les entrées sur les formes d'utiliser facilement l'auto-remplissage. Même s'il est écrit pour mobile, cela s'applique à la fois pour le bureau et mobile!

comment activer AutoComplete sur vos formulaires HTML

Voici quelques points clés sur la façon d'activer la saisie semi-automatique:

  • un <label> pour tous vos <input> champs
  • Ajouter un autocomplete l'attribut pour votre <input> les balises et le remplir à l'aide de ce guide.
  • Nommez votre name et autocomplete attributs correctement pour tous <input> les balises

  • Exemple:

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

Comment nommer votre <input> les balises

afin de déclencher autocomplete, assurez-vous de nommer correctement le name et autocomplete attributs <input> balises. Cela permettra automatiquement l'autocomplet sur les formulaires. Assurez-vous également d'avoir un <label>! Cette information peut aussi être trouvée ici.

Voici comment nommer vos entrées:

  • Nom
    • utilisez l'un de ceux - ci pour name: name fname mname lname
    • utilisez l'un de ceux - ci pour autocomplete:
      • name (nom complet)
      • given-name (pour le prénom)
      • additional-name (prénom)
      • family-name (pour le nom)
    • Exemple: <input type="text" name="fname" autocomplete="given-name">
  • Email
    • utilisez l'un de ceux - ci pour name:email
    • utilisez l'un de ceux-ci pour autocomplete:email
    • Exemple: <input type="text" name="email" autocomplete="email">
  • Adresse
    • utilisez l'un de ceux - ci pour name:address city region province state zip zip2 postal country
    • utilisez l'un de ceux - ci pour autocomplete:
      • pour une adresse entrée:
        • street-address
      • pour deux adresses entrée:
        • address-line1
        • address-line2
      • address-level1 (état ou province)
      • address-level2 (ville)
      • postal-code (zip code)
      • country
  • Téléphone
    • utilisez l'un de ceux - ci pour name:phone mobile country-code area-code exchange suffix ext
    • utilisez l'un de ceux - ci pour autocomplete: tel
  • Carte De Crédit
    • utilisez l'un de ceux - ci pour name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • utilisez l'un de ceux - ci pour autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • nom D'utilisateur
    • utilisez l'un de ceux - ci pour name:username
    • utilisez l'un de ceux - ci pour autocomplete: username
  • mots de passe
    • utilisez l'un de ceux - ci pour name:password
    • utilisez l'un de ceux - ci pour autocomplete:
      • current-password (pour signer des formulaires)
      • new-password (pour l'inscription et changement de mot de passe formulaires)

Ressources

10
répondu Katie S 2017-05-23 11:33:26

avec HTML5, une entrée autocomplete de style est possible sans Javascript!

Voir cet article: An HTML5-style "Google Suggest"

cependant, il n'est pas encore suffisamment soutenu. Les exemples de l'article ne fonctionneront qu'à L'Opéra pour le moment.

pour l'instant, il est probablement préférable d'utiliser simplement une bibliothèque bien testée avec un large support de navigateur comme jQuery UI, qui a un saisie semi-automatique widget.

3
répondu DanO 2013-07-03 17:51:48

j'ai suivi ce guide MSDN pour forcer l'entrée datalist pour n'autoriser que le texte qui correspond aux options dans le datalist. Il utilise L'API de Validation HTML Contrstraint:

http://msdn.microsoft.com/en-us/magazine/dn133614.aspx

0
répondu user2751200 2013-09-05 16:00:32