Bootstrap Typeahead 不显示建议列表

Question

我按照预先输入的documentation 进行操作，但对我没有任何帮助。我正在从远程加载我的数据： 这是来自远程的数据结构：

{"source":[{id:1,name:"coke"},{id:2,name:"papa"},{id:3,name:"mama"}]} 在客户端，这是我尝试使用的第一个代码：

var typeaheadInput = $('input[name=name]');
       typeaheadInput.typeahead({
           source: function (query) {
               if (query.length > 3) {
                   return $.get('/suggestproduct/' + query, function (data) {
                       return data.source;
                   });
               }
           },autoSelect:true
       });

该代码没有任何效果。信息已到达浏览器，但未显示。 我还尝试阅读有关寻血猎犬的信息，但什么也不懂，即使是之前提出的问题。我需要一个明确的解释。

我想要的是，使用 Bootstrap Typeahead 来显示我的数组中项目的列表（建议，自动完成），但 name 字段的值并将所选项目的 id 字段值传递给隐藏字段。

我怎样才能做到这一点？

Answer 1

你可以试试这个小提琴

我觉得你可以用这个

http://jsfiddle.net/apougher/7aaRy/

<input id='product'></input>

var jsonData = [
  {
    "id": 1,
    "name": "Andrew Pougher"
  },
  {
    "id": 2,
    "name": "Michele Moore"
  },
  {
    "id": 3,
    "name": "Michele Boob"
  },
  {
    "id": 4,
    "name": "Michael Moore"
  },
  {
    "id": 5,
    "name": "George Michael"
  }
]

var productNames = new Array();
var productIds = new Object();
//$.getJSON( '/getAjaxProducts', null,
       // function ( jsonData )
        //{
            $.each( jsonData, function ( index, product )
            {
                productNames.push( product.name );
                productIds[product.name] = product.id;
            } );
            $( '#product' ).typeahead( { source:productNames } );
       // };