jquery - Bootstrap の typeahead() と JSON を使用して入力を設定する

Question

ブートストラップの typeahead() 関数を使用して、JSON を使用したユーザー エントリに基づいて入力を更新しようとしています。JSON オブジェクトを取得し、それを key:value ペアにフォーマットしたので、どうにかして typeahead 関数にプッシュする必要があります。私がやろうとしていることを理解できるように、コードにコメントを付けてみました。とにかく、これまで私は

jQuery...

$("#search").on("input", function() {

  // Grab the data that we're going to use based on the user's input
  $.getJSON( "http://holidays.allinclusive.co.uk/external/destinations.ashx?query=" + $("#search").val() )

  // Once we've got it...
  .done(function(data) {

    // Create a new JSON object
    var myObject = { 'destinations': [] };

    // Loop through each of the 'suggestions' and for each one...
    $.each(data.suggestions, function (index, elem) {

      // Create a new object
      var currentObject = {}

      // Then we're going to use key value pairs {value: data.value, location: suggsestion.location}
      currentObject['value'] = [data.data[index]];
      currentObject['location'] = elem;

      // Push each object to myObject
      myObject.destinations.push(currentObject);

    });

    // Now with the myObject we're going to use it for .typeahead() on input#search
    $('#search').typeahead({ 

      // Grab the object we need
      source: myObject,

      // Now let's select the value from whatever the user wants
      updater: function(item) {
        selectedDestination = myObject.destinations[ data.data[index] ];
        return item;
      }
    });       

  }); //.done
}); //.on

そして最後にHTML...

<div class="well">  
    <input type="text" id="search" data-provide="typeahead" data-items="5">
</div>

誰かがこれをつなぎ合わせるのを手伝ってくれませんか? 私はフォーラムとネットを見て 2 日間過ごしましたが、今では抜け毛がなくなりました!

ありがとう