选择时 Typeahead 输入未定义

twitter Typeahead input goes undefined when selecting

我有一个 typeahead 工作正常,但是当我 select 一个条目时,输入充满了 "undefined"

知道为什么吗?是否有 "selecting" 事件或我可以用来用当前 selected 值填充输入的东西?我没有在网上找到有关此行为的任何信息。 这是提前声明:

$('.receivers-input').typeahead({
        minLength: 0,
    }, {
        source: function (query, cb) {
            var Request = $.ajax({
                methode: "POST",
                url: "MessagingService.svc/UserAutocomplete",
                dataType: "json",
                contentType: "application/json; charsert=utf-8",
                data: JSON.stringify({ "inputString": query })
            }).done(function (Response) {
                if (!Response.UserAutocompleteResult.success) {
                    if (!Response.UserAutocompleteResult.message)
                        return;
                    ErmesManager.notify(Response.UserAutocompleteResult.message, null);
                    return;
                }
                cb(Response.UserAutocompleteResult.d);
            });
        },
        templates: {
            suggestion: function (suggestion) {
                return '<p>' + suggestion + '</p>';
            }
        }
    }).on('typeahead:selected', function (event, data) {
        $('.receivers-input').val('');
        ComputeToken(data, true);
    }).on('blur', function (event, data) {
        $('.receivers-input').val(data);
    });
}

添加 on('typeahead:cursorchanged', function (event, data) {}); 即可。 另外,因为我使用 placeholder 显示有点乱。我通过在 tt-hint class.

上添加 visibility: hidden 来清理它

这里是完整的修改:

CSS :

.tt-hint {
    visibility: hidden;
}

Javascript :

 ...
}).on('typeahead:selected', function (event, data) {
    $('.receivers-input.tt-input').val('');
    ComputeToken(data, true);
}).on('blur', function () {
    $('.receivers-input.tt-input').val('');
}).on('typeahead:cursorchanged', function (event, data) {
    $('.receivers-input.tt-input').val(data);
});

未记录 cursorchanged 事件 here,如果有人有其他文档来源,我很乐意提供。

我要补充一点,这个问题和答案是在旧的 bootstrap 版本上下文中。使用最新版本(目前)typeahead:select 也可以做到这一点。