3

私はajax-autocompleterを使用しています。これはうまく機能します。私の目的は、既存のアイテムの編集機能と、見つからないアイテムの作成機能の間でリダイレクトすることです。

各liに特定のIDを挿入するので、afterUpdateElementオプションを使用して編集機能に使用できます。

しかし、結果が見つからない場合、リストは空であり、afterUpdateElementスクリプトに結果が見つからなかったことを通知する方法が見つかりません。実際、選択がないため、afterUpdateElementは呼び出されません。したがって、afterUpdateElementは役に立たない…</ p>

私はajaxリクエストによって送信された完全な値をテストすることを考えていました。しかし、私はそれをつかむ方法を見つけられませんでした…</ p>

4

2 に答える 2

1

それで、最終的に結果が選択されたかどうかを確認する方法を見つけました（Gwyohmの多大な助けを借りて）：

  1. まず、結果が選択されたかどうか (true/false) を記録する隠しフィールドを設定します。デフォルトでは、FALSE に設定されています。
  2. afterUpdateElement は、選択後にのみ使用されます。したがって、この aferUpdateElement を使用して、隠しフィールドを TRUE にします。

  3. ユーザーが検索フィールドの値を変更した場合、まったく新しい値が選択されていないため、afterUpdateElement は使用されず、非表示の値は引き続き TRUE に設定されます。その問題の解決策は、押されたキーを聞くことです。キーが押されると、隠しフィールドは FALSE に戻ります。これは、実際に選択を行うために使用された Enter キーを含め、すべてのキーで機能します。したがって、これはキープレス リスナーから削除する必要がある例外です。それでは、最後に追加の関数を見てみましょう。

    $(id-of-text-field).observe("keyup", function(e) {

    if (window.event) キーコード = window.event.keyCode;
    そうでなければ (e) キーコード = e.which;
    if (キーコード!=13) {

    $(id-of-hidden-field).value="FALSE";

    }

    }.bindAsEventListener($(テキストフィールドのid)));

次に、非表示フィールドを使用して、テキスト値を編集または作成する必要があるかどうかを知ることができます...

注意: このソリューションでは、ユーザーが既存の値と一致する値を選択せず​​に入力すると、新しい値と見なされ、この値をデータベースに追加するとエントリが重複します。（しかし、私は名前を扱っていたので、これは私にとっては問題ありませんでした.2人の異なる人が同じ名前を持っている可能性があります...）

于 2009-03-19T13:34:48.663 に答える
1

次のように updateChoices メソッドを上書きしてみることができます。

Ajax.Autocompleter.prototype.updateChoices =  function (choices) {
if(!this.changed && this.hasFocus) {

      if(!choices) {
        //do your "new item" thing here
      }
      else {
         this.update.innerHTML = choices;
         Element.cleanWhitespace(this.update);
         Element.cleanWhitespace(this.update.down());

         if(this.update.firstChild && this.update.down().childNodes) {
           this.entryCount =
             this.update.down().childNodes.length;
           for (var i = 0; i < this.entryCount; i++) {
             var entry = this.getEntry(i);
             entry.autocompleteIndex = i;
             this.addObservers(entry);
           }
         } else {
           this.entryCount = 0;
         }

         this.stopIndicator();
         this.index = 0;

         if(this.entryCount==1 && this.options.autoSelect) {
           this.selectEntry();
           this.hide();
         } else {
           this.render();
         }
      }
   }
}

controls.js で上書きするのは得策ではありません。代わりに、これを新しい .js に追加して、ライブラリの後に含めることができます。

編集: pff .. 悪いインデントについては申し訳ありませんが、TextMate からのコピー/貼り付けであり、タブとスペースが組み合わされています。しかし、あなたが要点を理解してくれることを願っています。私が唯一追加したのは、

      if(!choices) {
        //do your "new item" thing here
      }
      else {}

ブロック。また、コードをテストしていませんが、動作するはずです。

于 2009-03-19T13:38:35.067 に答える