jQuery Tag-It - タグが選択されたときにオートコンプリートリストを自動的に表示する方法

Question

私はTag-It、jQuery Auto-CompleteとjQuery Ajaxを古い（かなり大きい）asp.net web-formsプロジェクトに使用しています。

すべては完全に機能しますが、私の目標に到達する前にもう1つのことを達成する必要があります。タグ（単語または単語）がオートコンプリートドロップダウンから選択されると、次のタグ（単語または単語）の候補を含むオートコンプリートリストを表示したいと思います。 （手動でパーセント記号を入力すると、私が望む動作が得られますが、ユーザーはその解決策に満足できません）。

私はこれまで成功していませんでした。 私が使用しているコードは以下の通りです。私は、afterTagAddedメソッドにたくさんの異なるものを入れてみました。現在の試みでは、“Object expected”の例外があります。jquery-ui 1.11.4.

誰かが私を正しい方向に向けることができて大変感謝しています。 私はjavascriptやjQueryの専門家ではありません。

$(document).ready(function() { 
     var currentlyValidTags = []; 

     $(".TagItInput").tagit({ 
      autocomplete: { 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         url: "AutoCAdvTest3.aspx/GetTexts", 
         data: JSON.stringify({ text: request.term, tags: $(".TagItInput").tagit("assignedTags") }), 
         contentType: "application/json; charset=utf-8", 
         dataType: "json", 
         success: function (msg) { 
          currentlyValidTags = msg.d; 
          response(msg.d); 
         } 
        }); 
       }, 
       minLength: 0 
      }, 
      beforeTagAdded: function (event, ui) { 
       // Only allow tags from the completion list 
       if ($.inArray(ui.tagLabel, currentlyValidTags) == -1) { 
        return false; 
       } 
      }, 
      afterTagAdded: function (event, ui) { 
       // without this line I get an error saying that AutoComplete is not initialized 
       $(".TagItInput").autocomplete(); 
       // but.... Search method fails anyway 
       $(".TagItInput").autocomplete("search", "%"); 
      }, 
     }); 

     $(".ui-autocomplete-input").focus(); 
    }); 

Answer 1

私は解決策を見つけることができましたが、適切なアプローチであるかどうかは確かではありませんでした。

キーボードのスペースバーを手動で押すと、タグが検索され、補完リストがドロップされます。

Tag-ItafterTagAddedイベントでは、私はjQueryを使用して、Tag-Itによって作成された入力フィールドにスペースバーキーストロークイベントを送信しています。少なくともIEとChromeの後半バージョンでは、このやり方をするようだ。

  afterTagAdded: function (event, ui) { 
       var e = $.Event("keydown", { keyCode: 32 }); 
       $(".ui-autocomplete-input").trigger(e); 
      },