Funcionalidade extra Scriptaculous Ajax.Autocompleter em LI

Question

Estou usando a classe Ajax.Autocompleter da biblioteca Prototype/Scriptaculous que chama um WebHandler ASP.NET que cria uma lista não ordenada com itens de lista que contêm sugestões.

Agora estou trabalhando em uma página onde você pode adicionar sugestões a uma tabela de 'palavras de parada', o que significa que se ocorrerem na tabela, não serão mais sugeridas.

Coloquei um botão dentro dos elementos LI e quando você clicar nele ele deverá fazer uma solicitação ajax para uma página que então adiciona a palavra à tabela.Isso funciona.Mas então quero que as sugestões sejam atualizadas instantaneamente, para que apareçam sem a palavra recém-adicionada à tabela.De preferência, a palavra selecionada é a palavra seguinte ou anterior à palavra clicada anteriormente.

Como eu faço isso?O que acontece agora é que o LI em que você clicou no botão passa a ser a palavra selecionada e as sugestões desaparecem.

Os itens da lista são assim:

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

Onde {0} representa a palavra sugerida.A função JavaScript deleteWord(w) consegue chamar o webhandler que pode adicionar a palavra à tabela de 'palavras de parada'.

Answer 1

O Scriptaculous Autocompleter monitora o evento onclick no 'li'.Quando você cola uma imagem dentro de um 'li', tanto o 'img' quanto o 'li' receberão o evento click, como isso demonstra.É por isso que o Autocompleter está fazendo seu trabalho normal quando o botão é clicado:

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

O que eu tentaria é fazer com que seu 'onclick' defina algum tipo de variável de estado que informe que Delete foi clicado.Então, substituir 'updateElement' no Autocompleter não fazer nada se o estado estiver definido.Uma alternativa é subclassificar todo o Autocompleter e substituir 'onClick'.Isso fará com que a lista não desapareça quando sua imagem for clicada.

Para que a lista seja atualizada em tempo real, no 'onclick' da sua imagem, exclua também o 'li' da lista no DOM.Assim conceitualmente:

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