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

Answer 2

丹，

或许您可以利用typeahead:selected 事件并临时存储选定的数据。

var selectedDatum;

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

然后，当需要使用数据时（在 div 输入交换中），您可以调用现有存储 (selectedDatum)。您可能需要在输入值更新时围绕清除此存储添加一些逻辑，但这应该相当容易（使用typeahead:opened、keyup 等的某种组合。

希望这会有所帮助。

Answer 3

据我观察 当我们将注意力从应用了 typeahead 的 inputBox 上移开时， $('.typeahead').typeahead('val') 就起作用了。

但是如果焦点仍然在输入框中，假设一个人正在做一些事情 onchange 或 oninput ，那么我们需要在输入框中获取值 $('.typeahead').val();