HTML5 Datalist Problem

Hi,

habe ein Problem mit Datalist. Habe folgenden HTML Code.

HTML:
<div class="con_txt">

  <label class="label_txt" for="plz">PLZ</label>
  <input id="plz" name="plz" type="text" class="txt pflichtfeld" />

</div>
<div class="con_txt">
            
     <label class="label_txt" for="ort">Ort</label>
     <input type="text" class="txt pflichtfeld" placeholder="" id="ort" name="ort" list="orte"/>
     <datalist id="orte"></datalist>

</div>

Wenn man das Input Feld PLZ verlässt, wird eine Funktion aufgerufen.

Javascript:
jQuery(document).on('blur', '#plz', function() {
    
        var plz = jQuery(this).val();
    
        ortland(plz);
    
        return false;
    
});

Die Funktion ortland(plz) holt per Ajax die Orte usw. für eine PLZ und mit append fülle ich die Liste.

Javascript:
function ortland(plz){

    //Clear INPUT
    jQuery('#ort').val('');
    jQuery('#orte').children('option').remove();
    jQuery('#orte').val('');
    jQuery('#land').val('');
    jQuery('#landesvorwahl').val('')

    ....ajaxCall

Das funktioniert auch alles, nur habe ich das Problem das in der Datalist Orte auch Einträge angezeigt werden, die ich irgendwann mal im Form aber in anderen Inputs eingetragen habe.
Habe schon das Form auf autocomplete=off gesetzt. Aber irgendwie verstehe ich das icht ganz. Jetzt ist es aber so das der AjaxCall immer um eins mehrfach ausgeführt wird. Kann mir bitte jemand mal allgemein erklären wo wann und wie das abläuft?!
 
Zuletzt bearbeitet:
Mit welchem Browser testest du?

autocomplete="off" funktioniert im Chrome und in den anderen habe ich nichts zum autocompleten bei ort.
 
Zurück