Scriptacous Ajax.Autocompleter zusätzliche Funktionalität in LI

Question

Ich verwende die Ajax.Autocompleter-Klasse aus der Prototype/Scriptaculous-Bibliothek, die einen ASP.NET-WebHandler aufruft, der eine ungeordnete Liste mit Listenelementen erstellt, die Vorschläge enthalten.

Jetzt arbeite ich an einer Seite, auf der Sie Vorschläge zu einer 'stop words'-Tabelle hinzufügen können, was bedeutet, dass sie, wenn sie in der Tabelle vorkommen, nicht mehr vorgeschlagen werden.

Ich habe einen Knopf in den LI-Elementen und wenn Sie darauf klicken, sollte es eine Ajax-Anfrage an eine Seite machen, die dann das Wort der Tabelle hinzufügt. Das funktioniert. Aber dann möchte ich, dass die Vorschläge sofort aktualisiert werden, so dass die Vorschläge ohne das gerade hinzugefügte Wort erscheinen. Vorzugsweise ist das ausgewählte Wort das Wort neben oder vor dem zuvor angeklicks ten Wort.

Wie mache ich das? Was jetzt passiert, ist, dass die LI, auf die Sie geklickt haben, das ausgewählte Wort ist und die Vorschläge verschwinden.

Die Listeneinträge wie folgt aussehen:

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

Wo {0} das vorgeschlagene Wort darstellt. Die JavaScript-Funktion deleteWord(w) ruft den Webhandler auf, der das Wort in die Tabelle 'Stoppwörter' aufnehmen kann.

Answer 1

Scriptacous Autocompleter überwacht das onclick-Ereignis auf dem 'li'. Wenn Sie ein Bild in ein "li" stecken, erhalten sowohl das "img" als auch das "li" das Klickereignis, wie dies zeigt. Deshalb Autocompleter ist nur seine normale Sache zu tun, wenn die Schaltfläche geklickt wird:

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

Was ich würde versuchen, Ihr haben ‚Onclick‘ eine Art von Zustandsvariablen festgelegt, dass Sie das sagt geklickt Löschen wurde. Dann, override 'updateElement' in the Autocompleter nichts tun, wenn der Zustand eingestellt ist. Eine Alternative besteht darin, den gesamten Autocompleter zu unterklassifizieren und 'onClick' zu überschreiben. Dadurch wird die Liste beim Klicken auf das Bild nicht ausgeblendet.

Um die Liste in Echtzeit aktualisieren zu lassen, löschen Sie im 'onclick' Ihres Bildes auch das 'li' aus der Liste im DOM. So konzeptionell:

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