ASP MVC 3 - 使用鍵/值對來填充typeahead.js下拉列表

我想創建一個下拉列表，對於每個項目，在一行上列出一個代理名稱和標識，以及一些輔助信息（正如你看到在typeahead.js demo page ASP MVC 3 - 使用鍵/值對來填充typeahead.js下拉列表

我試圖從我的ASP MVC控制器的信息從我的視圖，然後顯示一條信息（代理的名字）開始簡單。第二步，當我看着Fiddler中的請求時，我可以看到我創建了一個我需要正確使用的對象的數組，然後退出控制器方法而沒有發生任何事件。那所有的t他需要的數據正在返回，並且格式正確。然而...

我已經看過幾乎所有的教程，以及我似乎無法弄清楚如何正確顯示信息。

這是我最近的嘗試。我簡化了一些事情，以便能夠在數組中循環選擇一個項目進行顯示。

查看代碼

<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傳回

enter image description here

同樣的屏幕截圖，我不是在Visual Studio或Chrome的調試器中看到任何錯誤消息所以我想我只是不正確的jQuery

來源

2013-04-22 NealR

固定使用的語法

 $('#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-06 21:47:02 NealR

僅供參考處理數據：你正在使用的不是typeahead.js，這是自舉typeahead.js 。不同的動物。 Bootstrap和Typeahead.js都來自Twitter。 Bootstrap 3.0已經放棄了對bootstrap-typeahead.js的支持，轉而使用typeahead.js。也許這是你得不到多少幫助的原因之一？

來源

2013-09-11 18:37:45 Will

ASP MVC 3 - 使用鍵/值對來填充typeahead.js下拉列表

回答

相關問題