prinz prinz - 4 days ago 5
Javascript Question

Remove auto complete selected item from the source

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.

Answer

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;        

            } 
            });
Comments