title: typeahead.js get input value on button click
body: <p>I hope I can explain what I'm trying to do...</p>
  
  <p>I am using twitter typeahead.js to show a list of vegetables. The user starts typing the name of a vegetable and then can select a vegetable from the list which, when selected, populates the input. The user then clicks a button "add item". When this button is clicked, I want to add the value of the input to a div (building up a list of items).</p>
  
  <p>I am having problems as the $('.typeahead').typeahead('val') method doesn't seem to be working at all (error: undefined). trying $('.typeahead').val() returns an empty string.</p>
  
  <p>How can I get the input value when a button is pressed?</p>
  
  <pre><code>//the url produce/get_produce_items returns an array of vegetables. The filter organises these into value (the vegetable name) and id (the id of the vegetable in the db)
  var produce_items = new Bloodhound({
                  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                  queryTokenizer: Bloodhound.tokenizers.whitespace,
                  prefetch: {
                      url: site_url('produce/get_produce_items'),
                      filter: function(list) {
                          return $.map(list, function(produce_item) { return { value: produce_item.name,id: produce_item.id }; });
                      },
                      ttl:10000
                  }
              });
  
              produce_items.initialize();
  
              var typeaheadSettings = {
                  hint: true,
                  highlight: true,
                  minLength: 1,
              };
              var typeAheadDataset = {
                  name: 'produce_items',
                  displayKey: 'value',
                  valueKey: 'value',
                  source: produce_items.ttAdapter(),
              };
  
              $('#items_list .typeahead').typeahead(typeaheadSettings,typeAheadDataset);
  
  //here's the button that is clicked, and when clicked should replace the typeahead with a div containing the typeahead value            
  $('#add_donation_item_line_btn').click(function() {
                  var item_count = $('input[name=item_count]');
                  var count = item_count.val();
                  var nextCount = parseInt(count) + 1;
  
                  //firm the line (swap the input out for a div)
  var val = $('#items_list &gt; div#don_line_'+count+' .typeahead').val();
                  firmLine(count,val);
  
                  $('#items_list .typeahead').trigger('added');
  
                  item_count.val(nextCount);
  
              });
  
              $('#items_list .typeahead').on('added',function(val){
                  $('#items_list .typeahead').typeahead(typeaheadSettings,typeAheadDataset);
              });
              $('#items_list .typeahead').on('typeahead:selected',function(evt, item){
  $(this).parent('span').parent('div').find('input[type=hidden]').val(item.id);
              });
  
              function firmLine(count,val) {
                  var line = $('#items_list &gt; div#don_line_'+count+' .typeahead');
                  line.typeahead('destroy');
                  line.replaceWith('&lt;div class="span2 typeahead-replacement"&gt;'+val+'&lt;/div&gt;');   
              }
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Dan</p>