jQuery

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

-> 完成，它找到了文本 <-

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

我试过在提交表单时使用这个跳转到下一个结果：

$('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

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

我决定使用 up/down 箭头滚动到 prev/next 结果...
而不是回车键或按钮。

这里是我修改的主要部分：

$("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);
});

我没有找到如何 "un-highlight" 以前的结果...
但是由于箭头使它滚动到正确的结果，我认为这样很酷。

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 - 要使用实时搜索插件上的提交按钮执行搜索？

jQuery - To perform a search using submit button on a live search plugin?

javascript

jquery-ui

jquery-plugins