2017-02-07 25 views
0

Lassen Sie uns sagen, dass ich Liste Eingang haben mit Datenliste wie folgt aus:Eingangsdatalist funktioniert nicht in dynamisch hinzugefügt Element

`<input type="text" name="color" id="color" value="" list="colorlist" /> 
    <datalist id="colorlist"> 
     <select style="display: none;"> 
      <option value="Black" /> 
      <option value="Blue" /> 
      <option value="Dark Green" /> 
      <option value="Grey" /> 
      <option value="Green" /> 
      <option value="Red" /> 
      <option value="White" /> 
      <option value="Yellow" /> 
     </select> 
    </datalist>` 

Wenn Liste wie diese als Teil von größeren HTML-Struktur geladen ist, dass ich über AJAX bekommen, diese Datenliste funktioniert nicht. Keine Autocomplete-Liste wird angezeigt. In allen anderen Fällen, wenn dies als Standardansicht geladen wird (also ohne AJAX-Anfrage), funktioniert alles einwandfrei. Ich bin 100% sicher, dass jedes Attribut den richtigen Namen hat.

Was ich vermisse?

+0

Können Sie mir bitte weitere Informationen geben? Wie gehst du mit der Antwort von AJAX um? Können Sie einen Plünderer oder Jsfiddle – Vikash

+0

erstellen Ich würde mir vorstellen, es ist, weil die Ereignisse mit Ihrer Autocomplete gebunden sind, wenn die Seite geladen wird. Sie müssen diesen Code also entweder beim Laden von ajax replizieren oder in [event delegation] (https://davidwalsh.name/event-delegate) suchen. –

+0

@Vikash https://jsfiddle.net/vn6emshs/1/ Dies ist ein Beispiel für meine Eingabe mit Datengeber, ich kopierte es aus meinem Code (wo es nicht funktioniert), aber irgendwie hat es auf jsfiddle, komisch funktioniert ... – TomTom

Antwort

0

Das Datenelementelement ist nicht korrekt. Entfernen Sie die Auswahl. In der Datei, die Sie in Ihrem Kommentar angegeben haben, haben Sie nicht die Auswahl.

So sollte es auf jeden Fall, wie das funktioniert:

<input type="text" name="color" id="color" value="" list="colorlist" /> <datalist id="colorlist"> <option value="Black" /> <option value="Blue" /> <option value="Dark Green" /> <option value="Grey" /> <option value="Green" /> <option value="Red" /> <option value="White" /> <option value="Yellow" /> </datalist>

Verwandte Themen