javascript - Scriptaculous Ajax.Autocompleter extra functionality in LI -

i'm using ajax.autocompleter class prototype/scriptaculous library calls asp.net webhandler creates unordered list list items contain suggestions.

now i'm working on page can add suggestions 'stop words' table, means if occur in table, won't suggested anymore.

i put button inside li elements , when click on it should ajax request page adds word table. works. want suggestions refreshed instantly, suggestions appear without word added table. preferably selected word word next or before clicked word.

how do this? happens instead li clicked button of gets selected word , suggestions disappear.

the list items this:

<li>{0}  <img onclick=\"deleteword('{0}');\" src=\"delete.gif\"/> </li> 

where {0} represents suggested word. javascript function deleteword(w) gets call webhandler can add word 'stop words' table.

scriptaculous autocompleter monitors onclick event on 'li'. when stick image inside 'li', both 'img' , 'li' click event, demonstrates. that's why autocompleter doing normal thing when button clicked:

<ul>   <li onclick="alert('li');">     <img onclick="alert('image')" src="blah.gif"/>   </li> </ul> 

what i'd try have 'onclick' set sort of state variable tells delete has been clicked. then, override 'updateelement' in autocompleter not if state set. alternative subclass entire autocompleter , override 'onclick'. make list not disappear when image clicked.

to have list update in real-time, in image's 'onclick', delete 'li' list in dom too. conceptually:

img onclick="deleteword('blah');setstatevariable();this.parentnode.parentnode.removechild(this.parentnode);"