0

Twitter の Typeahead.js からの単純な typeahead があり、うまく機能します。ただし、検索結果がいつ変更されたかを追跡する必要があります。これにより、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は次のようになります。

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

助言がありますか？私は長い間探し回っていますが、一般的に、TwitterのTypeahead.jsに関する情報はあまりありません

次のコードも試しましたが、LOAD でアラートが表示され、検索バーから離れた場所をクリックしてからもう一度クリックしたときにのみアラートが表示されます。

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

注意してください: 元の typeahead が 3.0 で廃止された後、Bootstrap が推奨する Twitter の Typeahead.js を使用しています。

前もって感謝します！

4

2 に答える 2

0

typeahead.js の修正版に従ってみました: https://gist.github.com/Yavari/1891669 ?
いくつかのイベントを添付する可能性があり、必要なものが含まれている可能性があります。

アップデート：

これを試して：

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

先行入力が何かを示唆する場合に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 に答える