Twitter的Typeahead.js与ScrollTo无法正常工作 [英] Twitter Typeahead.js with ScrollTo not working

问题描述

我有一个带有动态生成行的数据表（datatables.net）。我在数据表上方有一个搜索框。现在，您可以开始在框中输入内容，并且我有一个提前选项供您选择他们想要的行（您开始输入一个名称，并且typeahead为您提供公交车站名称选项，每行都基于一个公共汽车站在公交时间表中）。然后你可以选择你看到的正确的名字。

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

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

以下是我的代码：

HTML

 < DIV> 
< label>搜寻：< / label> 
< input id =table_Searchclass =tblSearch busStop span2 typeaheadtype =text>< / input> 
< / div> 
  

JAVASCRIPT

  function addTableSearch（dTable，$ container，schedule，stops）{
 //当公交时刻表和公交时刻表停止时
 if（schedule！== undefined&& schedule.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）; 
 
 
 $ b addTableSearch（dTable，$（'。tblSearch'），schedule.content.get（），schedule.stops）; 
  

我不认为我可以指定var selector作为前提，但我可以'想想从另一种类型中选择你想要的内容后触发scrollTo的另一种方法。

建议/帮助，请吗？

解决方案

找到我的解决方案！

  function addTableSearch（dTable，$ container，schedule，stops）{
 //公交时刻表和公交时刻表停止存在
 if（schedule！== undefined&&& schedule.stops！== undefined）{
 //获取未来停止
 var notPassed = Fp.filter（schedule.stops ，函数（stop）{
 return！stop.passed; 
}）; 
 var sequence; 
 $ container.typeahead（{
 source：Fp.pluck（notPassed，'busStopName'），
 items：15，
 updater：function（item）{
 // item是从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）; 
 
 
} 
 
 add TableSearch（dTable，$（'。tblSearch'），schedule.content.get（），schedule.stops）; 
  

I have a datatable (datatables.net) with dynamically generated rows. I have a "search" box above the datatable. Right now, you can start typing in the box and i have a typeahead give options for choices of which row they want (you start typing a name and the typeahead gives you the bus stop name options, each row is based off of a bus stop in a bus schedule). Then you can select the right name you see.

As of now, selecting the bus stop in the search box does nothing. You can select by either pressing enter or clicking on the typeahead result.

What I want it to do is use scrollTo (http://flesler.blogspot.com/2007/10/jqueryscrollto.html Version 1.4.1) to scroll to the row with that name in the datatable.

here is my code:

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

i don't think I can assign "var selector" to be the typeahead, but I can't think of another way to trigger the scrollTo after selecting what you want from the typeahead.

Suggestions / help, please?

解决方案

found my solution!

    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无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！