不显示时滚动到div的顶部

时间:2013-08-13 19:57:11

标签: javascript jquery typeahead typeahead.js

我有一个完整的搜索结果。当输入的类型输入失去焦点时,我希望将具有typeahead结果的div滚动到最顶端位置。

我正在使用typeahead.js,所以我目前有:

$('input[name="customer"]').on('typeahead:closed', function(){
    $('div.tt-dataset-customers').scrollTop(0);
});

然而,div永远不会滚动。认为这是因为隐藏了div,我也尝试过:

$('input[name="customer"]').on('typeahead:open', function(){
    $('div.tt-dataset-customers').scrollTop(0);
});

这也不起作用。

有没有办法在未显示的div上设置滚动位置?

小提琴显示正在发生的事情:http://jsfiddle.net/tTdF4/

1 个答案:

答案 0 :(得分:1)

修改v3

所以我在此添加了console.log,它从未被解雇过。

$('input[name="customer"]').on('typeahead:closed', function(){
    console.log('test');
});

因此,我没有从typeahead()拆分on(),而是使用了jQuery链,现在它正在触发typeahead:closed。不要问我为什么没有触发,仍然没有弄明白:(。

无论如何,当你输入a时,这将有效(在chrome v29上测试),向下滚动,点击外面然后点击返回输入,列表将会备份。

$('input[name="customers"]').typeahead({
    local: ['a','ab','ac','ad','ae','af',
            'ag','ah','ai','aj','ak','al',
            'am','an','ao','ap','aq','ar',
            'as','at','au','av','aw','ax',
            'ay','az'
    ],
    limit: 20,
    name: 'customers',
    rateLimitWait: 100,
    ttl: 300
}).on('typeahead:closed keypress', function(){
    console.log('test');
    $('div.tt-dataset-customers').animate({
        scrollTop: 0
    }, 900);
});

Updated fiddle

p.s。:至少在小提琴上,jquery 2.X和typeahead在IE9上的两个scritps上都会出错(参见控制台),如果你使用1.9 (edge)那么它就会起作用。

V3:为收听的事件添加了keypress,以便每次有人输入内容时都会向上滚动(包括输入a,退格并输入b等。)