jquery autocomplete remove seleted li item from dropdown menu

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

Are you using an array as the data source of your autocomplete? — bfavaretto, Jul 07 '11 at 19:48
@bfavaretto its JSON object just as in tutorial. The dropdown menu is nothing but li items, why couldn't it possible to get the id of that li because select means actually a click on that li item. Anyway I will go through ur method see how it works. thanx — kiranking, Jul 07 '11 at 20:59
In the tutorial, the JSON data comes from a server-side script. The list is populated on the fly as you type (i.e., `

score 3 · Accepted Answer · answered Jul 07 '11 at 20:15

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

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() { ...).

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

Then, inside the select callback, add the selected item's value to the ignored array:
```
ignored.push(ui.item.value)
```

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...

it works nice as I wanted. I just changed the code to make menu remains unclosed when selection made as described in this [link](http://stackoverflow.com/questions/3925153/prevent-jquery-autocomplete-options-from-closing-after-each-selection), so that clicking on each element will add that item into div and remove instanly from list. By your solution I have to retype the same text to generate list. Is it possible to assign click event to li item then in that event we can remove that item. — kiranking, Jul 08 '11 at 06:04

jquery autocomplete remove seleted li item from dropdown menu

1 Answers1