jquery - typeahead.js 在按钮单击时获取输入值

Question

我希望我能解释一下我想要做什么......

我正在使用 twitter typeahead.js 显示蔬菜列表。用户开始输入蔬菜的名称，然后可以从列表中选择一种蔬菜，选择该蔬菜后，就会填充输入。然后用户单击“添加项目”按钮。单击此按钮时，我想将输入的值添加到 div(构建项目列表)。

我遇到问题，因为 $('.typeahead').typeahead('val') 方法似乎根本不起作用(错误:未定义)。尝试 $('.typeahead').val() 返回一个空字符串。

按下按钮时如何获取输入值？

//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>');   
            }

谢谢

丹

Answer 1

这对我有用:

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