Funzionalità extra Scriptaculous Ajax.Autocompleter in LI

Question

Sto utilizzando la classe Ajax.Autocompleter dalla libreria Prototype/Scriptaculous che chiama un WebHandler ASP.NET che crea un elenco non ordinato con elementi dell'elenco che contengono suggerimenti.

Ora sto lavorando a una pagina in cui è possibile aggiungere suggerimenti a una tabella di "parole significative", il che significa che se compaiono nella tabella, non verranno più suggeriti.

Ho inserito un pulsante all'interno degli elementi LI e quando si fa clic su di esso dovrebbe eseguire una richiesta Ajax a una pagina che quindi aggiunge la parola alla tabella.Che funzioni.Ma poi voglio che i suggerimenti vengano aggiornati immediatamente, in modo che i suggerimenti vengano visualizzati senza la parola appena aggiunta alla tabella.Preferibilmente la parola selezionata è la parola successiva o precedente alla parola precedentemente cliccata.

Come faccio a fare questo?Quello che succede invece ora è che la LI su cui hai cliccato diventa la parola selezionata e i suggerimenti scompaiono.

Gli elementi dell'elenco hanno il seguente aspetto:

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

Dove {0} rappresenta la parola suggerita.La funzione JavaScript deleteWord(w) riesce a chiamare il gestore web che può aggiungere la parola alla tabella delle "parole non significative".

Answer 1

Scriptaculous Autocompleter monitora l'evento onclick su "li".Quando inserisci un'immagine all'interno di un "li", sia "img" che "li" riceveranno l'evento clic, come dimostrato.Ecco perché il completamento automatico funziona normalmente quando si fa clic sul pulsante:

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

Quello che proverei è che il tuo 'onclick' imposti una sorta di variabile di stato che ti dica che è stato fatto clic su Elimina.Poi, sovrascrivere "updateElement" nel completamento automatico non fare nulla se lo stato è impostato.Un'alternativa è creare una sottoclasse dell'intero completamento automatico e sovrascrivere 'onClick'.Ciò farà sì che l'elenco non scompaia quando si fa clic sulla tua immagine.

Per aggiornare l'elenco in tempo reale, nell'"onclick" della tua immagine, elimina anche il "li" dall'elenco nel DOM.In questo modo concettualmente:

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