Fonctionnalité supplémentaire Scriptaculous Ajax.Autocompleter 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 contenant des suggestions.

Je travaille maintenant sur une page où vous pouvez ajouter des suggestions à un tableau de « mots vides », ce qui signifie que s'ils apparaissent dans le tableau, ils ne seront plus suggérés.

J'ai mis un bouton à l'intérieur des éléments LI et lorsque vous cliquez dessus, il devrait faire une requête ajax vers une page qui ajoute ensuite le mot au tableau.Ça marche.Mais ensuite, je souhaite que les suggestions soient actualisées instantanément, afin qu'elles apparaissent sans le mot qui vient d'être ajouté au tableau.De préférence, le mot sélectionné est le mot suivant ou avant le mot précédemment cliqué.

Comment puis-je faire cela?Ce qui se passe maintenant, c'est que le LI sur lequel vous avez cliqué sur le bouton devient le mot sélectionné et les suggestions disparaissent.

Les éléments de la 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) peut appeler le gestionnaire Web qui peut ajouter le mot au tableau des « mots vides ».

Answer 1

Scriptaculous Autocompleter surveille l'événement onclick sur le 'li'.Lorsque vous collez une image à l'intérieur d'un « li », « img » et « li » recevront tous deux l'événement click, comme ceci le montre.C'est pourquoi l'Autocompleter fait son travail normal lorsque l'on clique sur le bouton :

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

Ce que j'essaierais, c'est que votre « onclick » définisse une sorte de variable d'état qui vous indique que Supprimer a été cliqué.Alors, remplacer 'updateElement' dans le programme de saisie semi-automatique ne rien faire si l'état est défini.Une alternative consiste à sous-classer l’intégralité du système de saisie semi-automatique et à remplacer « onClick ».Cela empêchera la liste de disparaître lorsque vous cliquerez sur votre image.

Pour que la liste soit mise à jour en temps réel, dans le '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);"