0

各項目について、エージェント名と ID を 1 行にリストし、その下の行にいくつかの補助情報をリストするドロップダウン リストを作成しようとしています ( typeahead.js デモ ページ.

ASP MVC コントローラーからビューに情報を渡し、1 つの情報 (エージェントの名前) を表示することから始めようとしています。コードをステップ実行すると、必要なオブジェクトの配列を正しく作成し、問題なくコントローラー メソッドを終了することがわかります。

次に、Fiddler でリクエストを見ると、必要なすべてのデータが適切な形式で返されていることがわかります。でも...

ほぼすべてのチュートリアルも見ましたが、情報を適切に表示する方法がわかりません。

これが私の最近の試みです。単純化して、配列を循環し、表示する項目を 1 つ選択できるようにしています。

コードを表示

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blattchat.com/demos/typeahead/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
    $(document).ready(function ($) {
        // Workaround for bug in mouse item selection
        $.fn.typeahead.Constructor.prototype.blur = function () {
            var that = this;
            setTimeout(function () { that.hide() }, 250);
        };

        $('#typeahead').typeahead({
            source: function (term, process) {
                var url = '@Url.Content("~/Agent/GetAgents")';

                return $.getJSON(url, { term: term }, function (data) {

                    var agents = [];
                    var map = {};

                    $.each(data, function (i, agent) {
                        map[agent.FirstName] = agent;
                        agents.push(agent.FirstName);
                    });

                    return process(agents);
                });
            },
            select: function (event, ui) {
                $.post('@Url.Action("Details","Agent")', { id: atrVal });
            }
        });
    })
</script>

コントローラーからのコード

    public JsonResult GetAgents(string term)
    {

            term = term.ToUpper();

                var lastAgents = from l in db.Agent
                                 where l.FirstName.Contains(term) ||
                                       l.LastName.Contains(term)
                                 select new
                                            {
                                                Name = l.FirstName,
                                                SymetraNumber = l.SymetraNumber,
                                             };


                var corp2Agents = from c in db.Agent
                                  where c.CorporateName.Contains(term)
                                  select new
                                  {
                                      Name = c.CorporateName,
                                      SymetraNumber = c.SymetraNumber,
                                  };

                return new JsonResult()
                {
                    Data = (lastAgents.Union(corp2Agents).ToArray()),
                    JsonRequestBehavior = JsonRequestBehavior.AllowGet
                };
    }

そして、これは Fiddler 経由で返されるもののスクリーン ショットです。

ここに画像の説明を入力

繰り返しますが、Visual Studio または Chrome のデバッガーでエラー メッセージが表示されないので、データを正しく処理していないと思います。jQuery

4

2 に答える 2

1

参考までに: あなたが作業しているのは typeahead.js ではなく、bootstrap-typeahead.js です。別の動物。Bootstrap と Typeahead.js はどちらも Twitter からのものです。Bootstrap 3.0 では、bootstrap-typeahead.js のサポートが廃止され、typeahead.js が使用されるようになりました。多分それがあなたがあまり助けを得られなかった理由の1つですか？

于 2013-09-11T18:37:45.390 に答える
0

この構文を使用して修正

        $('#typeahead').typeahead({
            source: function (term, process) {
                var url = '@Url.Content("~/Agent/GetAgents")';
                var agents = [];
                map = {};

                return ($.getJSON(url, { term: term }, function (data) {
                    $.each(data, function (i, item) {
                        map[item.Name] = item;
                        agents.push(item.Name);
                    });

                    process(agents);
                }));
            },
于 2013-05-06T21:47:02.473 に答える