JavaScript jQuery autocomplete datalist <option> entfernen

[Schumiel]

Hallo,

und zwar habe ich mir für mein autocomplete eine datalist aufgebaut.
Dabei habe ich mehrere input-Felder, die auf das autocomplete drauf laufen.

Ich möchte gern, dass wenn eine option aus dem datalist ausgewählt ist, es für die nächsten Felder nicht mehr auswählbar ist. Ich sehe im Quellcode, dass ich es gelöscht (https://paulund.co.uk/add-and-remove-options-in-select-using-jquery ) bekommen habe, jedoch kann ich das im nächsten input immer noch auswählen. Alternativ habe ich eine Lösung, dass das alte oder das aktuelle input leert (nach autocomplete (-> change), wenn es sich doppelt. Jedoch nicht wirklich schöne Lösung.

Wo muss ich ansetzen?

 

[hYpac0w]

Wie wärs damit: geb jedem <select> eine id und ein change event.
Dann etwas in diese Richtung:

$("#myselect1, #myselect2").change(function(){
    const $choice = $(this).val();
    const $id = $(this).attr("id");
    $("select:not(#" + $id + ")").each(function(){
        $(this).find("option:contains(" + $choice + ")").attr("disabled", "disabled");
    });
});

Kannst natürlich auch die option ganz löschen statt sie nur zu deaktivieren.

 

[Schumiel]

Sorry, dass passt nicht so ganz. Hier das fehlende HTML dazu.

<datalist id="list" style="display-none">
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
    <option value="4">Test4</option>
    <option value="5">Test5</option>
    ...
</datalist>

<input id="name" class="autocomplete" autocomplete="nope" onkeyup="myAutocomplete()" />

 

[NPC]

Ich sehe im Quellcode, dass ich es gelöscht (...) bekommen habe, jedoch kann ich das im nächsten input immer noch auswählen.

Hast du die Option evt. nur für ein Feld gelöscht (ID)?

$(".selectBox option[value='option1']").remove();

 

[hYpac0w]

Ok da habe ich dich wohl etwas falsch verstanden
Du kannst nachdem du das Element aus der Datalist gelöscht hast einfach das "list" Attribut des Inputs entfernen und neu erstellen, dann hast du die aktualisierte Datalist:

$("#name").removeAttr("list").attr("list", "list");

Edit:
Wie verknüpfst du eigentlich den Input mit der Datalist, du scheinst das "list" Attribut ja nicht zu benutzen?
https://www.w3schools.com/tags/tag_datalist.asp

 

[Schumiel]

Ich hole mir das per Javascript und baue damit das Array auf:

if($("#list").length > 0) {
    var options = document.getElementById('list').getElementsByTagName('option');
    ...

 

[hYpac0w]

Das brauchst du gar nicht, schau dir mal den w3schools Link an.
Wenn du den HTML Teil so aufbaust..

<datalist id="list">
    <option value="Test1">
    <option value="Test2">
    <option value="Test3">
    <option value="Test4">
    <option value="Test5">
    ...
</datalist>

<input id="name" list="list"/>

..sind die ganzen options im input.

Danach kannst du eine option löschen und mit

$("#name").removeAttr("list").attr("list", "list");

die Auswahl im input aktualisieren.

Ergänzung (2. April 2019)

Ich hab grad nochmal rumprobiert, bei mir zeigt das Input-Feld entfernte Optionen aus der Datalist sofort nicht mehr an. Hier eine Demo:
https://www.w3schools.com/code/tryit.asp?filename=G2OLRF588KWO

 

[Schumiel]

Danke, das geht wirklich.
Ich bin nun aber mit jQuery autocomplete ziemlich weit, so dass das wohl damit nicht geht.

 

[hYpac0w]

Müsstest dann mal deinen Code mit uns teilen, sonst kann man schwer helfen

 

[Schumiel]

if($("#list").length > 0) {
    var options = document.getElementById('list').getElementsByTagName('option');
    var optionVals = [], i = 0;

    for (i; i < options.length; i++) {

        optionVals[i] =
            {
                value: options[i].value,
                label: options[i].label
            }
        ;
    }
}

function myAutocomplete() {
  $(".autocomplete").autocomplete({
        minLength: 0,
        source: optionVals,
    ...
  });
}

<datalist id="list" style="display-none">
    <option value="1">Test1</option>
    <option value="2">Test2</option>
    <option value="3">Test3</option>
    <option value="4">Test4</option>
    <option value="5">Test5</option>
    ...
</datalist>

<input id="name" class="autocomplete" autocomplete="nope" onkeyup="myAutocomplete()" />

 

[hYpac0w]

Der Grund, warum das ganze nicht so funktioniert wie du es dir wünscht, ist, dass du die Liste mit den autocomplete Vorschlägen ein mal initialisierst:

...
var optionVals = [], i = 0;

for (i; i < options.length; i++) {

    optionVals[i] =
    {
        value: options[i].value,
        label: options[i].label
    }
}
...

Diese Liste verändert sich dann nicht automatisch, sobald du die datalist veränderst.
Die Lösung ist also, die Liste mit den optionVals neu zu erstellen, sobald du ein Element aus der datalist entfernst.
Außerdem weiß ich nicht, ob es sinnvoll ist, die Funktion myAutocomplete() bei jeder Tasteneingabe neu auszuführen.
Hier ist ein Lösungsvorschlag von mir:

//die optionVals als Parameter übergeben
function myAutocomplete(optionVals) {
  $(".autocomplete").autocomplete({
        minLength: 0,
        source: optionVals
  });
}

//das erstellen der Liste in eine Funktion packen
function test(){
    if($("#list").length > 0) {
        var options = document.getElementById('list').getElementsByTagName('option');
        var optionVals = [], i = 0;

        for (i; i < options.length; i++) {

            optionVals[i] =
                {
                    value: options[i].value,
                    label: options[i].label
                }
            ;
        }
        myAutocomplete(optionVals); //hier die Funktion aufrufen sobald die Liste erstellt ist
    }
}

//bei jedem Aufruf der Funktion wird die Liste neu erstellt und damit anschließend das autocomplete initialisiert
$(document).ready(function() {
    test();
    $("#list option").first().remove();
    test();
});

Dann noch im HTML das onkeyup entfernen:

<input id="name" class="autocomplete" autocomplete="nope" />