Entfernen automatisch abgeschlossenes Element aus der Quelle

Question

Ich brauche eine Hilfe von Ihnen.
Ich arbeite mit jQuery Auto abgeschlossen und ich möchte das Element aus der Auto-Vervollständigen-Auswahl nach der Auswahl entfernen.

Dies ist mein Code.

Hier wählen Sie den Artikel aus Auto-Vervollständigen-Box und an ein div. Was ich versuche zu tun ist, sobald das Element zum div hinzugefügt wurde, dann sollte es aus der Autovervollständigung entfernt werden. Ich habe diese link. Aber ich kann in meinem Fall nicht arbeiten. Bitte helfen Sie.

Answer 1

Versuchen mit diesem Code

$("#js-news-categories").autocomplete({ 
      minLength: 0, 
      source: availableTags, 
      multiselect: true, 
      autoFocus: true, 
      focus: function(event, ui) { 
      return false; 
      }, 
      select: function(event, ui) { 

      availableTags = jQuery.grep(availableTags, function(element) { 
      return element.value != ui.item.value; 
      }); 
      $('#js-news-categories').autocomplete('option', 'source', availableTags);   

      $("#js-news-categories").val(""); 
      var catItems = '<span class="c_item" id="c_item_'+ ui.item.id +'"><input type="hidden" value="'+ ui.item.id +'"/>'+ ui.item.value +'<span class="close">X</span></span>'; 
      $(".js-categories_select").append(catItems);  


      return false;   

      } 
      }); 

Answer 2

Sie können grep() verwenden, um aus einem Array zu filtern. Probier diese.

$("#js-news-categories").autocomplete({ 
 
    minLength: 0, 
 
    source: function(request, response) { 
 
      // create filter function here 
 
      response($.grep(
 
      availableTags, function(obj,i) { 
 
      var temp = $(".js-categories_select").data('values').split(','); 
 
      return temp.indexOf(obj.id) === -1; 
 
      }) ); 
 
     }, 
 
    multiselect: true, 
 
    autoFocus: true, 
 
    focus: function(event, ui) { 
 
    return false; 
 
    }, 
 
    select: function(event, ui) { 
 

 
    $("#js-news-categories").val(""); 
 
    var catItems = '<span class="c_item" id="c_item_' + ui.item.id + '">  <input type="hidden" value="' + ui.item.id + '"/>' + ui.item.value + '<span class="close">X</span></span>'; 
 
    $(".js-categories_select").append(catItems); 
 
    
 
    //add this for convenient in getting the value 
 
    var x = $(".js-categories_select").data('values'); 
 
    $(".js-categories_select").data('values',x + ui.item.id + ','); 
 
    return false; 
 

 
    } 
 
});

Answer 3

ist Ihr Ansatz richtig. Sie müssen das ausgewählte Element aus availableTags entfernen und autocomplete erneut initialisieren. grep ist eine Filterfunktion, welche Elemente in der Anordnung auf der Grundlage Ihrer Bedingungen zurück

hier lesen: http://api.jquery.com/jquery.grep/

so können Sie dies

availableTags = jQuery.grep(availableTags, function(element) { 
    return element.value != ui.item.value; 
    }); 

, die aus dem ausgewählten Element availableTags wird entfernen

var availableTags = [ 
{ 
    id:1, 
    value:"php" 
}, 
    { 
    id:2, 
    value:"java" 
}, 
    { 
    id:3, 
    value:"Asp.net" 
} 
] 

function triggerAutoComplete() { 
    $("#js-news-categories").autocomplete({ 
      minLength: 0, 
      source: availableTags, 
      multiselect: true, 
      autoFocus: true, 
      focus: function(event, ui) { 
      return false; 
      }, 
      select: function(event, ui) {  

      availableTags = jQuery.grep(availableTags, function(element) { 
      return element.value != ui.item.value; 
      }); 
      triggerAutoComplete(); 

      $("#js-news-categories").val(""); 
      var catItems = '<span class="c_item" id="c_item_'+ ui.item.id +'">  <input type="hidden" value="'+ ui.item.id +'"/>'+ ui.item.value +'<span class="close">X</span></span>'; 
      $(".js-categories_select").append(catItems);   
      return false;   

      } 
     }); 
} 

triggerAutoComplete(); 

Geige: http://jsfiddle.net/tintucraju/Ex3Rp/23/

aktualisieren

Wie pro Ihren Kommentar können Sie eine zusätzliche Funktion triggerAutoComplete() durch Ändern der Quelle auf eine Funktion vermeiden verwenden. Lesen Dokumentation: http://api.jqueryui.com/autocomplete/#option-source

source:function(request,response){ 
     response(availableTags); 
    }, 

Aktualisiert Fiddle: http://jsfiddle.net/tintucraju/aecfhxxp/1/