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

我在一个输入字段上使用Twitter的typeahead.js（），该字段是从查询字符串预先填充的。加载页面后，我希望通过编程触发typeahead结果的显示，而无需用户在表单字段中键入任何内容

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

任何指点都将不胜感激

---

谢谢

我查看了源代码，发现了这种未记录的方式：

var $myinput = $('#myinput');
$myinput.data('typeahead')._showDropdown()

---

查看源代码，它似乎在元素数据中的键

TypeaheadView

下存储了一个

TypeaheadView

对象。此

TypeaheadView

对象有一个内部方法，

\u showDropdown

，该方法在内部绑定到焦点事件（以及其他一些事件）

我不建议您这样做，但您应该能够手动调用该内部方法：

$('#yourTypeaheadElement').data('typeahead')._showDropdown();

或者，您是否尝试过在页面加载时只聚焦typeahead元素（当然，在将其初始化为typeahead元素之后）：

---

触发输入似乎可以做到这一点

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

在计算机上进行了测试

使用输入的现有值触发。当然，您可以提前更改值

这应该适用于“旧”引导typeahead插件：

$(".typeahead").eq(0).trigger("keyup");

不幸的是，没有用IE进行测试。。。

---

不知道新的typeahead插件…

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

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

根据我的测试（请参阅），focus（）方法是显示下拉列表所必需的。因此：

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

• 在第1行，我们将输入的当前值分配给变量theVal
• 在第2行，我们只需重置typeahead的计算值；及
• 在第3行，我们将返回原始值和焦点，这将导致建议下拉列表显示，好像用户键入了什么

---

实际上，我需要它来强烈鼓励用户从来自地理编码API调用的猎犬建议中进行选择，这样我就可以确保客户在提交表单之前获得坐标。

以下是@Sam_Butler工作的简化版本：

小心这个！ 对于那些正在考虑手动触发typeahead行为的人（例如点击按钮），我强烈建议你不要这样做

我是为了这个解决方案而来的，我几乎浪费了整整一天的时间来让它正常工作（在我的例子中，这是一个按钮点击）

对于那些真正想走这条黑暗之路的人，我与你们分享我的丑陋代码，让它工作：

//Removes default features of typeahead
//This means that typeahead will not work like an "autocomplete", it only will be trigged when the user Click in #btnSearch button!
var txt = $("#typeahead");
//Save input events in variables (we'll need them)
eventInput = $._data(txt[0], "events").input[0];
eventBlur = $._data(txt[0], "events").blur[1];
//Remove input events
txt.unbind("blur");
txt.unbind("input");

//Set click event that triggers typeahead features manually
$("#btnSearch").click(function () {
    //Clears the cache of engine for it call ajax again, without it when the term was already searched the ajax is not called!
    engine.clearRemoteCache();

    txt.focus(); //When we click in a button, the focus from input is lost, so we set it again to not lose the behaviors of keyboard keys (up, down, tab, etc)
    txt.bind("input", eventInput); //Bind the event that we had saved
    txt.trigger("input"); //Trigger input (like the answer from @epascarello)
    txt.unbind("input"); //Removes it again 
});

//Set event on parent of the suggestion's div, this makes the sugestion div close when user click outside it
$("body").click(function () {            
    if (eventBlur != undefined) {
        if ($(".tt-dropdown-menu:visible").length > 0) {
            eventBlur.handler(); //This event closes the suggestion menu
        }
    }
});

我做的另一件事是在typeahead.js上更改事件“\u checkInputValue”的代码。我改变这一点：

areEquivalent = areQueriesEquivalent(inputValue, this.query);

为此：

areEquivalent = false;//areQueriesEquivalent(inputValue, this.query);

我将其设置为false，因为typeahead不会向服务器发送两个相同的请求。当用户在搜索按钮中单击两次时（我的意思是，当他搜索已搜索的同一文本不止一次时），就会发生这种情况。无论如何，如果您使用的是本地数据，则无需执行此操作。

这对我很有效

$( document ).ready(function() {
    $('#the-basics .typeahead').typeahead({
      hint: false,
      highlight: true,
      minLength: 0
    },
    {
      name: 'states',
      displayKey: 'value',
      source: substringMatcher(states)
    });

    //set a value to input to trigger opening
    $(".typeahead").eq(0).val("a").trigger("input");
    //remove value for end user
    $(".typeahead").eq(0).val("");

});

---

参见此处示例：

其他答案很有帮助，但没有解决我的问题。此解决方案不涉及自定义任何角度ui代码本身，只用于触发typeahead以在显式单击按钮时获取结果

要做到这一点，我必须在另一个（禁用的）文本字段上覆盖一个文本字段，该文本字段是带有typeahead的实际文本字段。没有人会知道另一个在那里，但angular ui需要在那里才能在正确的位置启动菜单。您不能将其设为隐藏字段，因为它将无法在正确位置显示菜单

下面的指令将监视

typeaheadText

和

typeaheadTrigger

变量，以在按钮触发时填充disbled字段（通过将触发器设置为true）。该指令具有隔离的作用域，因此它不依赖于传入之外的任何内容

directive('typeaheadTrigger', function() {
  return {
    require: ["ngModel"],
    scope: {
      typeaheadText: '=',
      triggerFlag: '='
    },
    link: function(scope, element, attr, ctrls) {
      scope.$watch('triggerFlag', function(value) {
        if (scope.triggerFlag) {
          ctrls[0].$setViewValue(scope.typeaheadText);
          scope.typeaheadText = '';
          scope.triggerFlag = false;
        }
      });
    }
  };
})

控制器为此设置了一些东西-对象内的触发器和文本范围变量。这演示了如何做到这一点——理想情况下，您应该将整个过程包装在另一个指令中，这样就可以在应用程序中使用它，同时隐藏细节

---

下面是提示：

我使用了twitter引导程序typeahead，并表示在focus上，建议列表将打开。 这里的答案不太适合我，所以我写了这个简单的指令（需要jquery）：

现在只要添加这个属性，它就会触发焦点

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

使用：Typeahead v0.10.5

不要使用：

$（'.typeahead'）.typeahead（'open'）

这目前不起作用。来源：。
作为临时修复，请使用自定义jQuery keydown事件（在实例化typeahead之后）：

除非您有意将“typeahead”放入输入标记的类中，否则这些都不会起作用。如果您觉得没有必要这样做（它没有必要工作），那么最好使用typeahead.js写在输入标记上的类。它是“.tt输入”。下面是我从Sam_Butler那里抄袭的示例，为新的CSS类重新编码。这在最新的typeahead 0.10.5中适用：

var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();

对于任何在0.11.1版之后发现twitter的typeahead存在此问题的人，以下是我如何用一行代码解决此问题的：

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

当tt数据集中有1个项目时，我用它手动触发一个选择。加上这个是有道理的

$("#mytypeahead").keyup(function (e) {
                var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                if (charCode == 13) {
                    if ($(this).parent().find(".tt-dataset").children().length == 1) {
                        //This is how we are submitting a single selection on enter key
                        $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
                        var kde = jQuery.Event("keydown");
                        kde.which = 13;
                        $(this).trigger(kde);                           
                    }    
                }                    
            });

我尝试了这里的每一种方法，但都不起作用，只是使用了

$(".typeahead").val('hi').trigger('keyup');
$(".typeahead").val('hi').trigger('keydown');

上面的代码对我有用。我不知道到底发生了什么，但两种方法都不起作用，只有两种方法都起作用了。
谢谢各位提供的精彩答案！我挑了一个
<input typeahead-focus-trigger 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

var theVal = jQuery('.tt-input').val();
jQuery(".tt-input").typeahead('val', 're')
jQuery(".tt-input").focus().typeahead('val',theVal).focus();

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

$("#mytypeahead").keyup(function (e) {
                var charCode = (typeof e.which === "number") ? e.which : e.keyCode;
                if (charCode == 13) {
                    if ($(this).parent().find(".tt-dataset").children().length == 1) {
                        //This is how we are submitting a single selection on enter key
                        $(this).parent().find(".tt-dataset").children(0).addClass("tt-cursor");
                        var kde = jQuery.Event("keydown");
                        kde.which = 13;
                        $(this).trigger(kde);                           
                    }    
                }                    
            });

$(".typeahead").val('hi').trigger('keyup');
$(".typeahead").val('hi').trigger('keydown');