Remove auto complete selected item from the source

Question

I need a help from you.
I am working with jquery auto complete and i would like to remove the item from the auto complete selection after selecting it.

This is my code.

$( "#js-news-categories" ).autocomplete({
        minLength: 0,  
        source: availableTags,
        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);         
            return false;        
        } 
    });

Here am selecting the item from auto complete box and append to a div. What i am trying to do is once the item added to the div , then it should be removed from the auto complete. I got this link. But I cannot get into work in my case. Please help.

score 0 · Answer 1 · answered Nov 30 '16 at 12:13

You can use grep() to filter from array. Try this one.

$("#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;

  }
});

Tintu C Raju · Answer 2 · 2016-12-01T04:48:44.047

Your approach is correct. You have to remove the selected item from availableTags and initialize autocomplete again. grep is a filter function which will return elements in array based on your conditions

read here : http://api.jquery.com/jquery.grep/

so you can do this

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

That will remove the selected item from availableTags

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();

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

Update

As per your comment you can avoid using an extra function triggerAutoComplete() by changing the source to a function. read documentation:http://api.jqueryui.com/autocomplete/#option-source

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

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

Hi,without using the function triggerAutoComplete() , how can i implement this? — prinz, Dec 01 '16 at 04:21

score 0 · Accepted Answer · answered Dec 01 '16 at 04:46

Try with this 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;        

            } 
            });

Remove auto complete selected item from the source

3 Answers3