scriptaculous ajax autocomplete empty response

Question

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

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

結果が見つからない場合、リストは空であり、結果が見つからなかったことをafterUpdateElementスクリプトに伝える方法が見つかりません。 実際、選択肢がないので、afterUpdateElementは呼び出されません。ですから、afterUpdateElementは役に立たないです...

私は、ajaxリクエストによって送られた完全な値をテストすることを考えていました。 しかし、私はそう...それをつかむ方法

Answer 1

を見つけられませんでした、私は最終的に結果は（Gwyohmの巨大な助けを借りて）選択したかなかったかどうかを確認する方法を発見：

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

3. ユーザーが検索フィールドの値を変更した場合、新しい値が選択されていないため、afterUpdateElementは使用されず、隠し値はTRUEに設定されます。 その問題を解決するには、押されたキーを聞くことです。キーが押されると、隠しフィールドはFALSEに戻ります。これは、実際に選択を行うために使用されたEnterキーでさえ、すべてのキーに対して機能します。したがって、これはキー押下のリスナーから削除する必要がある例外です。

   $（ID-のテキスト・フィールド）.observe（ "からkeyup"、機能（E）{

   場合（ウィンドウ： だから、最終的に私たちの余分な機能を見てみましょう.event）キーコード= window.event.keyCode、そう
   （e）のキーコード= e.which場合、
   場合（キーコード= 13）{

   $（ID-の-隠しフィールド）！ .value = "FALSE";

   }

   } .bindAsEventListener（$（ID-のテキストフィールド）））。この溶液を用いて、ユーザーが種類の既存の値と一致する値とします。私たちは、その後

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

これを選択せず​​に新しい値とみなし、この値をデータベースに追加すると重複したエントリにつながります。 （しかし、これは私の名前で働いていたので私にとっては大丈夫でした、そして2人の異なる人が同じ名前を持つかもしれません...）

Answer 2

あなたはそうのような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に上書きするには良いideeaではありません。代わりに、これを新しい.jsに追加し、ライブラリの後に追加することができます。

EDIT：pff ..悪いインデントについては申し訳ありませんが、TextMateのコピー/ペーストであり、タブにはスペースが入ります。私はあなたがポイントを得ることを願っています。私が追加したのは、

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

ブロックです。また、私はコードをテストしなかったが、うまくいくはずだと思う。