以编程方式触发typeahead.js结果显示

Question

我在输入字段上使用Twitter的typeahead.js(https://github.com/twitter/typeahead.js/),该输入字段是从查询字符串预填充的.加载页面后,我想以编程方式触发预先输出结果的显示,而无需用户在表单字段中输入任何内容.

开箱即用,只有当用户在输入字段中手动输入内容并且我在typeahead.js中找不到任何可以调用以触发结果显示的方法时,才会触发typeahead.js.

任何指针都将非常感激.

谢谢!

Answer 1

触发输入似乎是这样做的.

$(".typeahead").eq(0).val("Uni").trigger("input");

在示例页面上测试了这个.

Answer 2

根据我的测试(参见小提琴),为了显示下拉列表,必须使用focus()方法.所以:

theVal = $('.typeahead').val();
$(".typeahead").typeahead('val', '')
$(".typeahead").focus().typeahead('val',theVal).focus();

• 在第1行,我们将Typeahead输入的当前值分配给变量theVal ;
• 在第2行,我们只需重置typeahead的计算值; 和
• 在第3行,我们将原始值和焦点放回原点,这会导致建议下拉列表显示为用户输入了某些内容.

我实际上需要这个来强烈鼓励用户从地理编码API调用中选择Bloodhound建议,这样我就可以确保客户在提交表单之前获得坐标.

Answer 3

$(".typeahead").typeahead('lookup').focus();

具有现有输入值的触发器.您可以提前更改价值

Answer 4

从Typeahead v0.10.1开始,更改typeahead的值将触发另一个查询并打开下拉列表:

var val = $(".typeahead").typeahead('val');
$(".typeahead").typeahead('val', '');
$(".typeahead").typeahead('val', val);

Answer 5

对于在版本0.11.1之后使用twitter的typeahead发现此问题的任何人,以下是我用一行解决它的方法:

$(".typeahead-input").typeahead('val', "cookie")
                     .trigger("input")
                     .typeahead('open');

Answer 6

我使用了twitter bootstrap typeahead,并在焦点上发出警告,建议列表将打开.这里的答案对我来说不太有用,所以我写了这个简单的指令(需要jquery):

.directive('typeaheadFocusTrigger', function() {
        return {
            limit: 'A',
            link: function(scope, element, attrs) {
                $(element).on('focus', function(e) {
                    var $target = $(e.target);
                    var origVal = $target.eq(0).val();
                    $target.eq(0).val('').trigger('input')
                    .eq(0).val(origVal).trigger('input');
                });
            }
        }
    });

现在只需添加此属性,它将在焦点上触发

<input typeahead-focus-trigger typeahead="">

Answer 7

使用:Typeahead v0.10.5

不要使用: $('.typeahead').typeahead('open');

这目前不起作用.资料来源:https://github.com/twitter/typeahead.js/issues/798.作为临时修复,使用自定义jQuery keydown事件(在您实例化typeahead之后):

var ttInstance = $('.typeahead').typeahead( config ); // Create Typeahead
ttInstance.typeahead('val', 'pancakes'); // Set an initial value

var evt = jQuery.Event('keydown');
evt.keyCode = evt.which = 40;
ttInstance.trigger(evt); // Opens the dropdown