0

オートコンプリートが関連付けられたテキストボックスがあります。また、入力ボックスのテキストに特定の文字が含まれている場合、オートコンプリート ドロップダウンにカスタム要素を追加しています。プラグインの _renderItem 関数をカスタマイズするこのカスタム要素を追加しています。

$tb.autocomplete({
    /* OPTIONS HERE */
}).data("autocomplete")._renderItem = function (ul, item) {
  if ($tb.val().indexOf('someText') > -1){
    ul.append('<li class="dropdown-element"><a href="#" class="my-option">My custom option</a></li>');
  }
  return false;
}

ユーザーが「someText」を含むものを入力してEnterキーを押すたびに（ドロップダウンで何も選択せずに）、カスタム要素に対してオートコンプリートの「select」イベントが発生するようにします。

テキストボックスに「keyup」イベントのハンドラーを追加しようとしましたが、Enterキーを押すたびにハンドラーが呼び出され（ドロップダウンで選択された要素があったとしても）、「select」からのイベントの伝播をキャンセルできません' オートコンプリートのイベント ハンドラー。(私は e.stopPropagation と e.originalEvent.stopPropagation を試しましたが、それでも「keyup」ハンドラーによって処理されます)。

これを達成する方法についてのアイデアはありますか？ありがとう

4

2 に答える 2

0

わかりました、解決策を見つけるのにしばらく時間がかかりましたが、ここにあります：

var autocomplete = $tb.autocomplete({
    /* OPTIONS HERE */
  select:function(e, ui){
    // The 'autocompleteselected' event wraps a 'menuselected' event that wraps a 'keydown' event
    // we stop the propagation of this event to prevent the event handler of keydown from processing the enter when an item was selected by that enter
    event.originalEvent.originalEvent.stopPropagation();

    ProcessSelectedElement(ui);
  }
});
autocomplete.data("autocomplete")._renderItem = function (ul, item) {
  if ($tb.val().indexOf('someText') > -1){
    ul.append('<li class="dropdown-element"><a href="#" class="my-option">My custom option</a></li>');
  }
  return false;
}

autocomplete.keydown(function(e){
    if (e.keyCode == 13 && !e.isPropagationStopped() && tb.val().indexOf('someText') > -1) {
      ProcessCustomElement();
    }
});

基本的に、このイベントが既存の項目の 1 つを選択したときに、元の keydown イベントの伝播を停止します。keydown イベント ハンドラーでは、そのイベントの伝播が停止されていないことを確認し、それに応じて入力を処理します。

考えられる問題は、何らかの理由でキーダウンのイベント ハンドラーが「autocompleteselected」イベント ハンドラーの前に実行される可能性があります。この場合、イベントの伝播は停止しませんが、私が行ったテストではこの問題は示されません。 .

于 2012-07-15T16:57:41.880 に答える
0

someText有効なオプションとして、openユーザーがすべてを入力していない場合はイベントを介して削除し、入力している場合はそのままにしておくというアプローチはどうですか- http://jsfiddle.net/tj_vantoll/bgstB/。

このアプローチの唯一の問題は、ユーザーがイベントのようなものを入力したときにイベントを呼び出す必要がある場合、イベントがfoo bar someText呼び出さopenれないことです。

于 2012-07-15T10:52:46.250 に答える