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();
});

Answer 2

Dan,

Perhaps you can make use of the typeahead:selected event and temporarily store the selected datum.

var selectedDatum;

$('.typeahead').on('typeahead:selected', function(event, datum) {
  selectedDatum = datum;
});

Then, when it comes time to use the datum (in the div-input swap), you can just call upon the existing store (selectedDatum). You may need to add some logic around clearing this store when the input value is updated, but that should be fairly easy (using some combination of typeahead:opened, keyup, etc.

Hope this helps.

Answer 3

From what I have observerd when we focus out of the inputBox on which typeahead is applied then $('.typeahead').typeahead('val') works.

But if case the focus is still in the input box , lets say one is doing something onchange or oninput , then to get the value in the input box we'll need $('.typeahead').val();