Scriptaculous Ajax.Autocompleter fonctionnalité supplémentaire dans LI

Question

J'utilise la classe Ajax.Autocompleter de la bibliothèque Prototype/Scriptaculous qui appelle un WebHandler ASP.NET qui crée une liste non ordonnée avec des éléments de liste qui contiennent des suggestions.

Maintenant je travaille sur une page où vous pouvez ajouter des suggestions à une table 'stop words', ce qui signifie que si elles se produisent dans la table, elles ne seront plus suggérées.

Je mets un bouton à l'intérieur des éléments LI et lorsque vous cliquez dessus, il doit faire une requête ajax à une page qui ajoute ensuite le mot à la table. Ça marche. Mais alors je veux que les suggestions soient actualisées instantanément, de sorte que les suggestions apparaissent sans le mot juste ajouté à la table. De préférence, le mot sélectionné est le mot suivant ou avant le mot précédemment cliqué.

Comment faire? Qu'est-ce qui se passe à la place maintenant, c'est que le LI, vous avez cliqué sur le bouton de devient le mot sélectionné et les suggestions disparaissent.

Les éléments de liste ressemblent à ceci:

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

Où {0} représente le mot suggéré. La fonction JavaScript deleteWord(w) appelle le webhandler qui peut ajouter le mot à la table 'stop words'.

Answer 1

Scriptaculous Autocompleter surveille l'événement onclick sur le 'li'. Lorsque vous placez une image dans un 'li', à la fois le 'img' et le 'li' obtiendront l'événement click, comme cela le démontre. Voilà pourquoi Autocompleter est juste en train de faire sa chose normale lorsque le bouton est cliqué:

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

Ce que je vais essayer est d'avoir votre établi une sorte « onclick » de variable d'état qui vous indique que Supprimer a été cliqué. Ensuite, override 'updateElement' in the Autocompleter pour ne rien faire si l'état est défini. Une alternative est de sous-classer l'Autocompleter entier et de surcharger 'onClick'. Cela fera disparaître la liste lorsque vous cliquerez sur votre image. Pour que la mise à jour de la liste se fasse en temps réel, dans 'onclick' de votre image, supprimez également le 'li' de la liste dans le DOM. Comme ceci conceptuellement:

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