So deaktivieren Sie die automatische Vervollständigung, während Sie das Datalist-Element in HTML verwenden

Lesezeit: 5 Minuten

Benutzer-Avatar
Yousuf Memon

Ich habe ein input Feld, das eine Liste mit HTML5 anzeigt <datalist> Element. Das Problem ist das mit <datalist> Die automatische Vervollständigung des Browsers zeigt auch die Verlaufsliste (die Liste der zuvor eingegebenen Werte, die nicht in der <datalist>). Also ich will die einfach loswerden history-list nicht der <datalist>.

Wenn ich die verwende autocomplete = "off" Funktion, dies blockiert auch die <datalist>.

Kurz gesagt, ich will nur die <datalist> nicht die Geschichte.

  • Ich habe auch dieses Problem. Scheint ein Versehen zu sein, keine Möglichkeit zur Unterscheidung zwischen diesen beiden einzuschließen.

    – ajbraus

    20. November 2018 um 16:54 Uhr

  • Ich bin nicht auf das Problem der Sperrung gestoßen datalist. Geprüft unter Firefox 63.0.3 und Chromium 70.0.3538.110. Alles funktioniert wie erwartet mit autocomplete="off"

    – pt12lol

    10. Dezember 2018 um 11:01 Uhr

Ist es möglich, dass Sie die verwenden input Feld ohne ein id oder name Attribut? Ohne das hat der Browser keine Möglichkeit, diesem Element einen Verlauf zuzuordnen.

In meinem ziemlich schnell Beim Testen auf Firefox schien dies den Trick zu machen:

<form>
  <!-- these will remember input -->
  With id: <input id="myInputId" list="myList" /><br />
  With name: <input name="myInputName" list="myList" /><br />

  <!-- these will NOT remember input -->
  No id, name, class: <input list="myList" /><br />
  With class: <input class="myInputClass" list="myList" />

  <datalist id="myList">
    <option value="Option 1"></option>
    <option value="Option 2"></option>
  </datalist>

  <br />

  <input type="submit" />
</form>

Im obigen Code ist die inputs mit einem id oder name würde sich an vergangene Werte erinnern, aber die input ohne irgendetwas und die Eingabe mit nur a class möchten nicht sich an nichts erinnern.

Leider macht dies die Verwendung des input etwas schwieriger, wenn Sie brauchen es zu haben name oder id. In diesem Fall würde ich es mit einem versuchen id‘ed input was auch ist display: none‘ed und verwenden Sie dann etwas JavaScript, um es mit einer synchron zu halten input das wird sich nicht an vergangene Werte erinnern.

  • Ah, guter Vorschlag. Tatsächlich habe ich gerade festgestellt, dass ich das gleiche Problem bei meiner eigenen Frage mit einem gelöst habe <input type="hidden"> und den Namen bei der echten Eingabe wegzulassen. Ich halte sie mit einem einfachen Stück jquery synchron: stackoverflow.com/questions/29756791/…

    – Stephan Müller

    23. April 2015 um 20:19 Uhr

  • @StephanMuller ja, genau das habe ich mir auch gedacht!

    – Das Toastbrot

    23. April 2015 um 20:22 Uhr

  • Interessanter Vorschlag, kann jemand bestätigen, ob dasselbe auch für Chrome funktioniert? Ich nehme an, sogar Chrome merkt sich den Verlauf basierend auf der ID?

    – Raj Pawan Gumdal

    20. April 2016 um 15:17 Uhr


  • Getestet in Chrome und es funktioniert wie angekündigt. Mein HTML wird jedoch aus JSP generiert und ich kann die Verwendung des Attributs “name” nicht vermeiden, da es für die Zuordnung benötigt wird. Irgendwelche anderen Lösungen?

    – Raj Pawan Gumdal

    20. April 2016 um 19:41 Uhr

  • In den neuesten Versionen von Firefox (50) und Chrome (55) verwenden autocomplete="off" auf der input hat das erwartete Verhalten: es deaktiviert den Verlauf, zeigt aber den datalist Optionen.

    – Laurent VB

    9. Januar 2017 um 13:52 Uhr

Benutzer-Avatar
Ananda

Versuchen Sie es mit der automatischen Vervollständigung des HTML-Attributs

<input name="q" type="text" autocomplete="off"/>

Quelle Deaktivieren Sie die automatische Vervollständigung für die Eingabe

  • Vielen Dank! Das bringt mir bei, zuerst die Dokumentation zu lesen: developer.mozilla.org/en-US/docs/Web/HTML/Element/input

    – jmathew

    29. Juni 2016 um 16:36 Uhr

  • Die OP hat gesagt, dass sie es verwendet haben autocomplete Attribut.

    – Sơn Trần-Nguyễn

    2. September 2017 um 20:09 Uhr

  • Das Problem tritt in Kombination mit Datenliste auf… Nachdem Sie das Formular abgeschickt haben, erinnert es sich an den zuvor ausgewählten Datenlistenwert, obwohl die automatische Vervollständigung “aus” ist. Ich habe es gerade unter Firefox 62.0.3 konfrontiert

    – Salathiel Genese

    6. Oktober 2018 um 2:10 Uhr


  • Ich habe festgestellt, dass in Chrome unten immer noch falsche Dinge vorgeschlagen wurden, abhängig vom Namen der Eingabe und / oder Datenliste. Ex. Feldname medNames zeigte unten ein paar meiner Namenskombinationen. Durch die Verwendung der Datenlisten-ID für den Autocomplete-Wert wurde dies verhindert.

    – WebDude0482

    6. November 2019 um 15:21 Uhr

  • Einfachste und beste Lösung. Ich hatte nicht das Problem, das OP hatte; Eingang verbinden mit list = "datlistID". (Ich verwende auch Platzhalter für alten Wert)

    – Sondre

    14. Mai 2020 um 0:45 Uhr


Benutzer-Avatar
Ulrich Bert

Ich verwende einen Code wie diesen:

<input name="anrede" list="anrede" onmousedown="value="";" />
<datalist id="anrede">
    <option value="Herr"></option>
    <option value="Frau"></option>
</datalist>

gut: Die zur Auswahl angezeigte Datenliste ist vollständig

Schlecht : Das Eingabefeld ist leer, daher wird der alte Wert nicht dokumentiert, um ihn dem Benutzer ggf. zu merken

  • Wenn Sie sich den Eingabewert für den Benutzer merken möchten, fügen Sie den Wert auch in den Platzhalter = “Wert” ein – so ist es eine kleine Hilfe für den Benutzer 😉

    – adilbo

    13. Juni 2018 um 9:53 Uhr


Sie können autocomplete=”new-password” verwenden. autocomplete = “off” hat in meinem Fall nicht funktioniert.

<input name="q" type="text" autocomplete="new-password"/>

Benutzer-Avatar
Kumar Shanmugam

Probieren Sie es aus, ich hoffe, es funktioniert.

<input id="datalisttestinput" list="stuff" autocomplete="off"></input>
<datalist id="stuff">
     <option id="1" value="Amy">
     <option id="2" value="Kristal">
     <option id="3" value="Collin">
     <option id="4" value="Carl">
</datalist>

Benutzer-Avatar
nwillo

Versuche dies:

<datalist id="datalist_id">

js:

dataList = $("#datalist_id")
dataList.empty()

Dadurch wird der Verlauf der Datenliste gelöscht. Dies funktionierte für mich auf Chrom. Wenn Sie dann Optionen zur Liste hinzufügen möchten, versuchen Sie Folgendes:

dataList.append("<option>Some Option</option>")

Prost !!!

1228380cookie-checkSo deaktivieren Sie die automatische Vervollständigung, während Sie das Datalist-Element in HTML verwenden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy