LI の Scriptaculous Ajax.Autocompleter 追加機能

Question

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

現在、「ストップ ワード」テーブルに候補を追加できるページを作成中です。つまり、テーブル内に候補が出現しても、それらは提案されなくなります。

LI 要素内にボタンを置き、それをクリックすると、ページへの Ajax リクエストが実行され、単語がテーブルに追加されます。それはうまくいきます。ただし、テーブルに追加されたばかりの単語なしで候補が表示されるように、候補を即座に更新したいと考えています。選択された単語は、前にクリックされた単語の次または前の単語であることが好ましい。

どうすればいいでしょうか？代わりに、ボタンをクリックした LI が選択された単語になり、候補が表示されなくなります。

リスト項目は次のようになります。

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

どこ {0} は提案された単語を表します。JavaScript関数 deleteWord(w) 「ストップワード」テーブルに単語を追加できる Web ハンドラーを呼び出すことができます。

Answer 1

Scriptaculous Autocompleter は、「li」の onclick イベントを監視します。この例が示すように、「li」内に画像を貼り付けると、「img」と「li」の両方でクリック イベントが発生します。これが、ボタンがクリックされたときにオートコンプリーターが通常の動作を行う理由です。

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

私が試したいのは、「onclick」に、削除がクリックされたことを示すある種の状態変数を設定させることです。それから、 オートコンプリーターの「updateElement」をオーバーライドします 状態が設定されている場合は何もしません。別の方法は、オートコンプリーター全体をサブクラス化し、「onClick」をオーバーライドすることです。これにより、画像をクリックしてもリストが消えなくなります。

リストをリアルタイムで更新するには、画像の「onclick」で、DOM のリストから「li」も削除します。概念的には次のようになります。

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