0

我有一个来自 Twitter 的 Typeahead.js 的简单 typeahead，效果很好。但是，我需要跟踪搜索结果何时发生变化，以便我可以加载一个函数，该函数将从预先输入的结果 div 中加载特定图像。

我的预输入代码如下所示：

$('#search').typeahead({
    remote: 'ajax-connect.php?search&q=%QUERY',
    valueKey: 'header',
    autoselect: true,
    template: [
        '<a href=\'{{link}}\' class=\'group\'>',
        '<span class=\'image\'><img style=\'width:60px;height:60px;\' data-fk=\'{{user_id}}\' data-type=\'{{fk_type}}\' data-width=\'60\' class=\'repo-avatar\' src=\'" . GetAvatar() . "\'></span>',
        '<span class=\'details\'>',
        '<p class=\'repo-name\'>{{header}}</p>',
        '<p class=\'repo-note\'>{{note}}</p>',
        '<p class=\'repo-description\'>{{description}}</p>',
        '<p class=\'rep-subfield\'>{{subfield}}</p>',
        '<p class=\'type\'>{{type}}</p>',
        '</span>',
        '</a>'
    ].join(''),
    engine: Hogan
})
.bind('typeahead:selected', function () {
    $('form').submit();
});

我尝试了以下方法：

$('.tt-dropdown-menu').on('change', function(){
    alert('it changed!');
    SetAvatarUrls();
});

但这不起作用。

该函数setavatarurls看起来像这样：（也许有一种方法，所以一般来说，它只会简单地查找任何 new ，然后运行该函数？）

function SetAvatarUrls(reload) {
    $('img.avatar').each(function() {
        var fk = $(this).data('fk');
        var type = $(this).data('type');
        var width = $(this).data('width');
        var height = $(this).data('height');
        var thumb = $(this).data('thumb');
        var required = $(this).data('required');
        var auto = $(this).data('auto');
        var temp = $(this).data('temp');

        if(!$(this).data('done') || reload) {
            if(auto) {
                $(this).attr('src', root_url+'ajax-connect.php?avatar&required='+required+'&src='+$(this).attr('src'));
                var success = 1;
            } else if(fk && type) {
                $(this).attr('src', root_url+'ajax-connect.php?avatar&temp='+temp+'&fk='+fk+'&type='+type+'&w='+width+'&h='+height+'&thumb='+thumb+'&required='+required);
                var success = 1;
            }

            if(success) {
                $(this).data('done', '1');
            }
        }
    });
}

有什么建议么？我已经搜索了很长时间，但总的来说，关于 Twitters Typeahead.js 的信息并不多

我也尝试了以下代码，但我只在 LOAD 和当您单击远离搜索栏时给我警报，然后再次单击：

.bind('typeahead:opened', function () {
    alert('now!');
    SetAvatarUrls();
});

请注意：在 3.0 版弃用了原始 typeahead 之后，我正在使用 Bootstrap 推荐的 Twitters Typeahead.js。

提前致谢！

4

2 回答 2

0

您是否尝试过以下 typeahead.js 的修改版本：https ://gist.github.com/Yavari/1891669 ？
它提供了附加一些事件的可能性，也许它有你需要的东西。

更新：

尝试这个：

$('#search').on('keyup', function() { alert('test'); SetAvatarUrls() });

如果您只想在 typeahead 建议某些内容时调用SetAvatarsUrls() ，请尝试以下操作：

$('#search').on('keyup', function() { 
    if($('.tt-dropdown-menu span.tt-suggestions div.tt-suggestion').length > 0) {
        alert('test');
        SetAvatarUrls();
    }
});
于 2013-10-15T16:20:41.587 回答
0

您可以使用 Typeahead 收听一些标准事件。（见https://github.com/twitter/typeahead.js/#custom-events）

typeahead:opened是适合您的活动。

$('#search').on('typeahead:opened', function() { 
    if($('.tt-dropdown-menu span.tt-suggestions div.tt-suggestion').length > 0) {
        alert('test');
        SetAvatarUrls();
} });
于 2013-10-16T11:24:53.647 回答