typeahead.js get input value on button click

Question

I hope I can explain what I'm trying to do...

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).

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.

How can I get the input value when a button is pressed?

//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 > 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 > div#don_line_'+count+' .typeahead');
                line.typeahead('destroy');
                line.replaceWith('<div class="span2 typeahead-replacement">'+val+'</div>');   
            }

Thanks,

Dan

Answer 1

This worked for me:

$('#add_donation_item_line_btn').click(function() {
  // Get value of input
  var foo = $('input.typeahead.tt-input').val();
});