jQuery ui Automatische Vervollständigung: Fügen Sie den gewählten Wert der Dropdown und die Vermeidung von Duplikaten

Question

https://jsfiddle.net/shucode/xxbkrowr/

Für jeden Wert bevölkerten Ich möchte es verknüpft ist Etiketten in der Dropdown-Liste.

Ich habe versucht, aber Liste ist mit allen Ergebnissen angefügt, nicht nur diejenigen, die ich brauche.

Sehen Sie bitte meine Geige

$("#two").autocomplete({ 
     source: availableTags, 
     focus: function (event, ui) { 
      $("#two").val(ui.item.value); 
      return false; 
     }, 
     select: function (e, ui) { 
      $("#two").val(ui.item.value); 

      $.each(availableTags, function (key, value) { 
       var option = $('<option />').val(value.label).text(value.label); 
       $("#jobTypeD").append(option); 
      }); 
      share = ui.item.label; 
      alert(share); 
      return false; 
     }, 
     minLength: 0, 
     autofocus: true 
    }); 

Answer 1

Ich habe Ihre Geige geändert und hier ist der Arbeits DEMO

Jetzt nur der Wert in der Autocomplete ausgewählt wird in der Dropdown-Liste und Duplikate hinzugefügt werden, werden nicht hinzugefügt . Hier ist der modifizierte JS-Code:

$(function() { 
    var availableTags = 
     [ 
      { "id": "2", "value": "CCTV/Satellites/Alarms", "label": "Aerial \u0026 satellite dish installation" }, 
      { "id": "2", "value": "CCTV/Satellites/Alarms", "label": "Burglar, security \u0026 intruder alarm installation" }, 
      { "id": "2", "value": "CCTV/Satellites/Alarms", "label": "CCTV installation" }, 
      { "id": "2", "value": "CCTV/Satellites/Alarms", "label": "Digital Home Network" }, 
      { "id": "2", "value": "CCTV/Satellites/Alarms", "label": "Fire alarm installation" }, 
      { "id": "2", "value": "CCTV/Satellites/Alarms", "label": "Sound \u0026 Audio Visual Installation" }, 
      { "id": "3", "value": "Bathroom Fitter", "label": "Fit Bath" } 
     ]; 

     $("#two").autocomplete({ 
      source: availableTags, 
      focus: function (event, ui) { 
       $("#two").val(ui.item.value); 
       return false; 
      }, 
      select: function (e, ui) { 
       $("#two").val(ui.item.label); 

       //check if selected value already exists in the dropdown, if not then append the option to the dropdown 
       if($("#jobTypeD option").filter(function (i, o) { return o.value === ui.item.label; }) 
       .length <= 0) 
       { 
         var option = $('<option />').val(ui.item.label).text(ui.item.label); 
             $("#jobTypeD").append(option); 
        alert("selected value is now added to the dropdown"); 
       } 
       else { 
       alert("The selected value already exists in the dropdown and is dulicate. So it will not be added to the dropdown."); 
       } 


       /*$.each(availableTags, function (key, value) { 
        var option = $('<option />').val(value.label).text(value.label); 
        $("#jobTypeD").append(option); 
       });*/ 
       share = ui.item.label; 
       //alert(share); 
       return false; 
      }, 
      minLength: 0, 
      autofocus: true 
     }); 
});