Question

我开始使用mark.js实时搜索插件，我可以将其修改为自动滚动到页面上正在搜索的文本部分。

喜欢这样：

SEARCH BOX |_jklmno____| <-- User searches here
    123
    456
    789
    abcde
    fghi
    jklmno <--- Then the page will automatically scroll and stop here.
    pqrst

- ＆GT;完成后，它找到了文本＆lt; -

代码有效，如何构建一个按钮，在提交时，页面会跳转到下一个结果？

我尝试使用此功能在提交表单时跳转到下一个结果：

$('html,body').animate({scrollTop: mark.eq(index).offset().top}, 500);
    }

这也是：

 else if ('mark[data-markjs]').live("submit", function(e) {
      e.mark();
              $('html,body').animate(
              {scrollTop: mark.offset().top -100}
              , 200);  

    });

但它不起作用。

这是working fiddle **（为了查看搜索字段，您必须稍微滚动结果标签）

这是jQuery：

$.noConflict()
jQuery(function($) {
  var mark = function() {

    // Read the keyword
     var keyword = $("input[name='keyword']").val();

    // Determine selected options
    var options = {


     "filter": function(node, term, counter, totalCounter){
        if(term === keyword && counter >= 1){
            return false;
        } else {
            return true;
        }
    },
    done: function() {
        var mark = $('mark[data-markjs]');
        if (mark.length) {

  $('html,body').animate({scrollTop: mark.eq(index).offset().top}, 500);


        }       


/*
else if ('mark[data-markjs]').live("submit", function(e) {
  e.mark();
          $('html,body').animate(
          {scrollTop: mark.offset().top -100}
          , 200);  

});
*/



}






    };
    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");  });




    // Mark the keyword inside the context
    $(".context").unmark();
    $(".context").mark(keyword, options);


 };

  $("input[name='keyword']").on("keyup", mark);
  $("input[type='checkbox']").on("change", mark);



  $("input[name='keyword']").on("submit", mark);



 });

Answer 1

我和你的小提琴玩了一会儿这是一个很酷的问题。

我决定使用上/下箭头滚动到上一个/下一个结果...
而不是输入键或按钮。

这是我改变的主要部分：

$("input[name='keyword']").on("keyup", function(e){
    if(e.which==40){    // 40 = down arrow
        e.preventDefault();
        arrowOffset++;
    }
    if(e.which==38){    // 38 = up arrow
        e.preventDefault();
        arrowOffset--;
        if(arrowOffset<1){
            arrowOffset=1;
        }
    }
    mark(arrowOffset);
});

我没有找到如何“取消突出显示”之前的结果...
但由于箭头使其滚动到正确的结果，我认为这样很酷。

done: function() {
    var mark = $('mark[data-markjs]').last();   // Scroll to last <mark>
    if (mark.length) {  
        $('html,body').animate({scrollTop: mark.offset().top-90}, 500);
    }
}

请查看my fiddle以获取完整更新的脚本。

jQuery - 使用实时搜索插件上的提交按钮执行搜索？

1 个答案: