Scriptaculous Ajax.Autocompleter LIの追加機能

Question

Prototype/ScriptaculousライブラリのAjax.Autocompleterクラスを使用しています。このライブラリは、提案を含むリスト項目で順序付けられていないリストを作成するASP.NET WebHandlerを呼び出します。

ここでは、「ストップワード」テーブルに候補を追加できるページに取り組んでいます。つまり、テーブルに存在する場合、それらは推奨されません。

LI要素の中にボタンを置いて、それをクリックすると、ページにajaxリクエストを行い、その単語を表に追加する必要があります。それは動作します。しかし、私は提案を即座にリフレッシュして、提案が表に追加されたばかりの言葉なしに表示されるようにします。好ましくは、選択された単語は、以前にクリックされた単語の次または前の単語である。

どうすればよいですか？代わりに今何が起こるかは、ボタンをクリックしたLIが選択された単語になり、提案が消えることです。

リスト項目は、次のようになります。{0}は候補の単語を表し

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

。 JavaScript関数deleteWord(w)は、単語を「ストップワード」テーブルに追加できるウェブハンドラを呼び出すようになります。

Answer 1

Scriptaculous Autocompleterは、 'li'のonclickイベントを監視します。 'li'の中に画像を貼り付けると、 'img'と 'li'の両方にclickイベントが表示されます。ボタンがクリックされたときに自動入力補完がちょうどその正常なことをやっている理由です：

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

私が試してみた何することはあなたの「onclickの」削除がクリックされたことを示しています状態変数のいくつかの並べ替えを設定していることです。次に、override 'updateElement' in the Autocompleterは、状態が設定されている場合は何もしません。オートコンプリート全体をサブクラス化して 'onClick'をオーバーライドする方法もあります。それはあなたのイメージがクリックされるときリストが消えないようにします。

リストをリアルタイムで更新するには、画像の 'onclick'でDOMのリストから 'li'も削除します。この概念のように：

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