Bootstrap TypeAhead with JSON data

Bootstrap TypeAhead with JSON data

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js "></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<input id='product'></input>
<p id="teste">
</p>
</p>

JavaScript

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 } );
            $("#teste").html(productIds);
       // };