0

私はブートストラップ 2.2.2 typeahead を使用しようとしています。これは、ドキュメントに従って、その Source オプションのいくつかの機能に構成できます。

    $('#test').typeahead({           
        source: function (query, process) {
            return $.get('@Url.Action("Search")', { query: query }, function (data) {
                return process(data);
            });
        }
    });

これは私がしようとしているものです。

私のサーバー側には単純なアクションがあります

    public ActionResult Search(string query)
    {
        var teamMembers = new List<String>();
        for (int i = 1; i < 21; i++)
        {
            var teammember = "john doe + ( " + i +" )";                                    
            teamMembers.Add(teammember);
        };

        return new JsonResult()
        {
            Data = teamMembers.ToArray(),
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };
    }

これより簡単なことはありませんが、私の「検索」アクションはまったくヒットしません。誰かが私が間違っていることと、非同期によって設定された Source によって正確に TypeAhead コントローラー Action を呼び出す方法を教えてくれる場合。ブートストラップ 2.2.2 ネイティブ コンポーネントのみを使用する関数。説明が必要な場合はお知らせください。

静的データは正常に機能しているため、ここで欠落しているファイルはないようです。以下のマークアップでもわかるように。

    <input type="text" data-provide="typeahead"                                 
            data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>

PS pls は、typeahead フォークについて言及していません。Twitter ブートストラップ 2.2.2 のネイティブ typeAhead 機能について知りたいだけです。

更新: 完全なコード HomeController

    public class HomeController : Controller
    {
    public ActionResult Index()
    {
        return View();
    }        

    public ActionResult TypeAhead(string query)
    {
        var teamMembers = new List<String>();
        for (int i = 1; i < 21; i++)
        {
            var teammember = "john doe + ( " + i +" )";                                    
            teamMembers.Add(teammember);
        };

        return new JsonResult()
        {
            Data = teamMembers.ToArray(),
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };
    }        
}

現在のビュー マークアップ。

    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />

    <script type="text/javascript">

      $(document).ready(function() {

          $('#testSearch').typeahead({
              source: function (query, process) {
                  $.get('@Url.Action("TypeAhead")', { query: query }, function(data) {
                     process(data);
                  });
               }
          });        
      });

    </script>


    <ol class="round">               
      <li class="three">
        <input id="testSearch" data-provide="typeahead" >
     </li>        
   </ol>
4

1 に答える 1

0

あなたのコードは私にとってはうまくいきます。

まったく新しいプロジェクトを作成し、nuget から twitter ブートストラップ 2.2.2 を取得し、次のコードをインデックス ビューに追加しました。

<input type="text" id="test" data-provide="typeahead"/>

<script>
$('#test').typeahead({
    source: function (query, process) {
        return $.get('@Url.Action("Search")', { query: query }, function (data) {
            return process(data);
        });
    }
});
</script>

次に、検索メソッドをコピーしてホームコントローラーに貼り付けました

文字 J と O をテキスト ボックスに入力すると、先行入力機能が期待どおりに機能します。

あなたに問題を引き起こしている何かが他にあるに違いありません。

テキストボックスに入力したときに、正しい検索エンドポイントに対してリクエストが行われていることを、Web インスペクタまたはフィドラーなどのツールを使用して確認しましたか?

新しいプロジェクトを作成するとうまくいきますか?

ビューの完全なコードをここに投稿できますか?

于 2013-02-13T12:38:58.580 に答える