Scriptaculous Ajax.Autocompleter extra functionality in LI

Question

I'm using the Ajax.Autocompleter class from the Prototype/Scriptaculous library which calls an ASP.NET WebHandler which creates an unordered list with list items that contain suggestions.

Now I'm working on a page where you can add suggestions to a 'stop words' table, which means that if they occur in the table, they won't be suggested anymore.

I put a button inside the LI elements and when you click on it it should do an ajax request to a page which then adds the word to the table. That works. But then I want the suggestions to be refreshed instantly, so that the suggestions appear without the word just added to the table. Preferably the selected word is the word next or before the previously clicked word.

How do I do this? What happens instead now is that the LI you clicked the button of gets to be the selected word and the suggestions disappear.

The list items look like this:

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

where {0} represents the suggested word. The javascript function deleteWord(w) gets to call the webhandler which can add the word to the 'stop words' table.

Answer 1

Scriptaculous Autocompleter monitors the onclick event on the 'li'. When you stick an image inside an 'li', both the 'img' and the 'li' will get the click event, as this demonstrates. That's why Autocompleter is just doing its normal thing when the button is clicked:

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

What I'd try is to have your 'onclick' set some sort of state variable that tells you that Delete has been clicked. Then, override 'updateElement' in the Autocompleter to not do anything if the state is set. An alternative is to subclass the entire Autocompleter and override 'onClick'. That will make the list not disappear when your image is clicked.

To have the list update in real-time, in your image's 'onclick', delete the 'li' from the list in the DOM too. Like this conceptually:

img onclick="deleteWord('blah');setStateVariable();this.parentNode.parentNode.removeChild(this.parentNode);"