如何禁用typeahead:将填充的文本字段聚焦在远程typeahead.js中时处于活动状态

时间:2016-04-08 15:19:29

标签: javascript typeahead.js twitter-typeahead

我使用的是typeahead.js并且它很棒,但这是我的用例:我有一个文本字段,当页面是页面时,服务器端已经填充了一个字符串已加载,因此当用户关注文本字段时,我不希望显示建议菜单。

typeahead.js似乎总是在聚焦文本字段时显示菜单。这是有道理的,因为minLength是2,文本字段值类似于" Tony" (管他呢)。但我尝试使用hint: false并在$('.typeahead').typeahead('close')事件的回调中调用typeahead:active,但似乎都没有停止显示菜单。

这是我使用的初始代码:

$('#locationInput').typeahead({
    hint: false,
    highlight: false,
    minLength: 2
},
{
    name: 'locations',
    display: 'name',
    source: typeaheadLocations, // a simple Bloodhound instance
    templates: {
        suggestion: function(locationObj) {
            return $('<div>' + locationObj.name + '</div>');
        }
    }
});

当我聚焦文本字段并且实际显示菜单之间 稍微延迟,因为必须运行远程GET。所以我猜测我需要在它专注之后以某种方式阻止它。

1 个答案:

答案 0 :(得分:2)

看起来关闭typeahead:open事件中的菜单可以解决问题,但这对我来说似乎很糟糕。 :(

$('#locationInput').typeahead({
    hint: true,
    highlight: true,
    minLength: 2
},
{
    name: 'locations',
    display: 'name',
    source: typeaheadLocations,
    templates: {
        suggestion: function suggestion(locationObj) {
            return $('<div>' + locationObj.name + '</div>');
        }
    }

}).on('typeahead:open', function(e) {
    var $input = $(e.currentTarget);

    if (!$input.data('wasFocusedOnce')) {
        $input.data('wasFocusedOnce', true);
        $input.typeahead('close');
    }

}).on('typeahead:close', function(e) {
    $(e.currentTarget).removeData('wasFocusedOnce');
}).on('keydown', function(e) {
    $(e.currentTarget).data('wasFocusedOnce', true);
});

如果有人知道更好的方法,我会全力以赴!