Question

I am using jquery autocomplete (1.8) to fill tags just like explained in http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/.

What i need is after selection of LI item from drop down menu, that item should be removed from list.

In select section of autocomplete I tried to get current LI using diff method like

$(this).get(0).tagname //which return undefined 
e.target.id //which return id of textfield to which autocomplete is bound

Answer 1

Assuming you are doing exactly as in the tutorial you linked to:

1. Before attaching the autocomplete, create an empty array to hold items that should be ignored (var ignored=[];). You could put it in the global scope to ensure it will be accessible anywhere (put before $(function() { ...).

2. On the definition of the source callback (which formats the results), replace this

   //process response
   $.each(data, function(i, val){
       suggestions.push(val.name);
   });
   

   with this:

   //process response
   $.each(data, function(i, val){
       if(ignored.indexOf(val.name) == -1) {
           suggestions.push(val.name);
       }
   });
   

3. Then, inside the select callback, add the selected item’s value to the ignored array:

   ignored.push(ui.item.value)
   

4. You’ll probably want to ‘un-ignore’ the item if the user clicks on a remove link. Inside the remove handler definition, on the first line, add this:

   var text = $(this).parent().find('a').remove().end().text();
   var position = ignored.indexOf(text);
   if(position != -1) {
       ignored.splice(position, 1);
   }
   // rest of the original code below...