Question

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

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

任何指针都会非常感激。

谢谢！

Answer 1

触发输入似乎就是这样做的。

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

在example page上进行了测试。

Answer 2

根据我的测试（参见fiddle），为了显示下拉列表，必须使用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发现此问题的任何人，以下是我用一行解决它的方法：

status** Boost Include: c:/local/boost_1_55_0
status** Boost Libraries: 
status** Boost Libraries:

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

Answer 8

查看源代码，它似乎在密钥TypeaheadView下的元素数据中存储了typeahead个对象。这个TypeaheadView对象有一个内部方法_showDropdown，它内部绑定到焦点事件（以及其他几个）。

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

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

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

// after page loads and yourTypeaheadElement is initialized as a typeahead
$('#yourTypeaheadElement').focus();

Answer 9

除非您故意将'typeahead'放入输入标记的类中，否则这些都不会起作用。如果你觉得不需要这样做（它没有必要工作），你最好使用typeahead.js写入输入标签的类。这是“.tt-input”。这是我在Sam_Butler中编写的示例，为新的CSS类重新编码。这适用于我最近的类型0.10.5：

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

Answer 10

这应该适用于“旧的”bootstrap typeahead插件：

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

不幸的是没有用IE测试过... 不知道新的typeahead插件...

Answer 11

以下是@ Sam_Butler作品的简化版本：http://jsfiddle.net/rimian/hrnf9

<button type="button" id="button">Crick</button>
<input type="text" id="text" class="typeahead">

使用Javascript：

$('#button').click(function() {
  $("#text").focus().typeahead('val', 'London');
});

// instantiate the bloodhound suggestion engine
var locations = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address=%QUERY&components=country:GB&sensor=false&region=uk', //add key
        filter: function (locations) {
            return $.map(locations.results, function (location) {
                return {
                    value: location.formatted_address
                };
            });
        }
    }
});

locations.initialize();

$('#text').typeahead(null, {
    name: 'value',
    displayKey: 'value',
    source: locations.ttAdapter()
});

Answer 12

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

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

Answer 13

小心这个！

对于那些正在考虑手动触发先行行为的人（例如按下按钮），我强烈建议您不要这样做。

我来找到这个解决方案，我几乎整整一天都没有办法让它正常工作（在我的情况下只需按一下按钮）。

对于那些真正想要以这种黑暗方式走的人，我与你分享我的丑陋代码，使其成功：

//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上更改事件“_ checkInputValue”的代码。我改变了这个：

areEquivalent = areQueriesEquivalent(inputValue, this.query);

到此：

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

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

Answer 14

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

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

下面的指令将监视typeaheadText和typeaheadTrigger变量，以便在按钮触发时填充已显示的字段（通过将触发器设置为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;
        }
      });
    }
  };
})

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

这里是插件：http://plnkr.co/edit/UYjz6F5ydkMQznkZAlfx?p=preview

Answer 15

这对我有用。

$( 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("");

});

请参见此处：http://joshuamaynard.com/sandbox/autocomplete

Answer 16

当tt-dataset中有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);                           
                    }    
                }                    
            });

Answer 17

我在这里尝试了所有方法，但仅通过使用

就不起作用了

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

上面的代码对我有用。不知道到底发生了什么，但只使用两个都起作用，只能使用两个都不起作用。

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

17 个答案:

小心这个！