跟踪typeahead.js从搜索加载新内容的时间

Question

I have a simple typeahead from Twitters Typeahead.js, and it works great. However, I need to track when the search results changes, so that I can load a function, which will load specific images inside the results div from the typeahead.

My typeahead code looks like this:

$('#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();
});

I have tried the following:

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

But that doesn't work.

The function setavatarurls looks like this: (maybe there is a way, so that in general, it will just simply look for any new 's and then run the function?)

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');
            }
        }
    });
}

Any suggestions? I have been searching around for a long time now, but in general, theres not much information about Twitters Typeahead.js

I have also tried the following code, but I only gives me the alert on LOAD and when you click away from the searchbar, and then click again:

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

Please be aware: I am using the Twitters Typeahead.js as recommended by Bootstrap after the original typeahead was deprecated as of 3.0.

Thanks in advance!

Answer 1

Did you try following modified version of typeahead.js: https://gist.github.com/Yavari/1891669 ?
It gives possibility of attaching some events, and maybe it has what you need.

Update:

Try this:

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

and if you want to call SetAvatarsUrls() only when typeahead suggests something, try this instead:

$('#search').on('keyup', function() { 
    if($('.tt-dropdown-menu span.tt-suggestions div.tt-suggestion').length > 0) {
        alert('test');
        SetAvatarUrls();
    }
});

Answer 2

There are some standard events you can listen to with Typeahead. (see https://github.com/twitter/typeahead.js/#custom-events )

typeahead:opened is the event for you.

$('#search').on('typeahead:opened', function() { 
    if($('.tt-dropdown-menu span.tt-suggestions div.tt-suggestion').length > 0) {
        alert('test');
        SetAvatarUrls();
} });