Question

我有一个动态生成行的数据表（datatables.net）。我有一个＆＃34;搜索＆＃34;数据表上方的框。现在，您可以开始在框中输入，我有一个预先输入选项，可以选择他们想要的行（您开始输入名称，而typeahead为您提供公交车站名称选项，每行都基于公交车站在公共汽车时刻表）。然后，您可以选择您看到的正确名称。

截至目前，在搜索框中选择公交车站什么都不做。您可以通过按Enter键或单击预先输入结果来选择。

我想要它做的是使用scrollTo（http://flesler.blogspot.com/2007/10/jqueryscrollto.html版本1.4.1）滚动到数据表中具有该名称的行。

这是我的代码：

HTML

<div>
    <label>Search:</label>
    <input id="table_Search" class="tblSearch busStop span2 typeahead" type="text"></input>         
</div>

JAVASCRIPT

function addTableSearch(dTable, $container, schedule, stops){
       //while the bus schedule and bus schedule stops exist
        if(schedule !==undefined && schedule.stops !== undefined){
        //getting the future stops
            var notPassed = Fp.filter(schedule.stops, function (stop) { 
                                      return !stop.passed; });
                var selector =  $container
                    .typeahead({
                        source : Fp.pluck(notPassed, 'busStopName'),
                        items  : 15
                        });
                    $('#bus-tab .dataTables_scrollBody').scrollTo(selector);

 }

addTableSearch(dTable, $('.tblSearch'), schedule.content.get(), schedule.stops);

我认为我不能指定＆＃34; var selector＆＃34;作为预先输入，但我无法想到在从预先输入中选择你想要的内容后触发scrollTo的另一种方法。

建议/帮助，拜托？

Answer 1

找到了我的解决方案！

    function addTableSearch(dTable, $container, schedule, stops){
   //while the bus schedule and bus schedule stops exist
    if(schedule !==undefined && schedule.stops !== undefined){
    //getting the future stops
        var notPassed = Fp.filter(schedule.stops, function (stop) { 
                                      return !stop.passed; 
                                  });
            var sequence;
            $container.typeahead({
                source : Fp.pluck(notPassed, 'busStopName'),
                items : 15,
                updater : function(item) {
                    // item is item selected from typeahead
                    var busStopArray = [];
                    $.each(schedule.stops, function(index, value) {
                        busStopArray[index] = value.busStopName
                                + " - " + value.sequence;
                        if (value.busStopName === item) {
                            sequence = value.sequence;
                        }
                    });

                var selector = 'tr[data-sequence="' + sequence + '"]';
                $('#firstSchedule-tab .dataTables_scrollBody').scrollTo(selector);
                $('#secondSchedule-tab .dataTables_scrollBody').scrollTo(selector);


}

addTableSearch(dTable, $('.tblSearch'), schedule.content.get(), schedule.stops);

Twitter Typeahead.js与ScrollTo无法正常工作

1 个答案: