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

Question

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

Jetzt auf einer Seite arbeite ich, wo Sie Vorschläge zu einer ‚Stoppwörter‘ Tabelle aufgenommen werden können, was bedeutet, dass, wenn sie in der Tabelle auftreten, werden sie nicht mehr vorgeschlagen werden.

habe ich einen Knopf innerhalb der LI-Elemente und wenn Sie darauf klicken sollte es eine Ajax-Anforderung an eine Seite, die dann das Wort an den Tisch hinzufügt. Das funktioniert. Aber dann möchte ich die Vorschläge sofort aufgefrischt werden, so dass die Vorschläge ohne das Wort nur hinzugefügt, um die Tabelle. Vorzugsweise wird das ausgewählte Wort ist das Wort neben oder vor dem vorher angeklickt Wort.

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

Die Listeneinträge wie folgt aussehen:

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

Wo {0} stellt das vorgeschlagene Wort. Die JavaScript-Funktion deleteWord(w) bekommt die WebHandler zu nennen, die das Wort dem ‚Stoppwörter‘ Tabelle hinzufügen können.

Answer 1

Scriptaculous Autocompleter überwacht das Onclick-Ereignis auf dem 'li'. Wenn Sie ein Bild innerhalb eines ‚li‘ kleben, sowohl die ‚img‘ und die ‚li‘ wird das Click-Ereignis erhalten, wie dies zeigt. Deshalb Autocompleter sind 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, ist Ihr gesetzt, eine Art Zustandsvariablen ‚Onclick‘ zu haben, der Ihnen sagt, dass Löschen geklickt wurde. Dann Überschreibung ‚updateElement‘ im Autocompleter nichts zu tun, wenn der Staat gesetzt. Eine Alternative ist die gesamte Autocompleter und Überschreibung ‚onClick‘ Unterklasse. Das wird die Liste macht nicht verschwinden, wenn Ihr Bild geklickt wird.

Um die Liste zu aktualisieren in Echtzeit hat, in Ihrem Bild der ‚Onclick‘, löscht die ‚li‘ aus der Liste der zu DOM. Wie dies vom Konzept her:

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