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

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

本文关键字：搜索 提交 按钮 执行 插件 实时 jQuery      更新时间：2023-09-26

我开始使用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);  
    });

这里是工作的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);

 });

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

我决定使用向上/向下箭头滚动到上一个/下一个结果…
而不是回车键或按钮

下面是我修改的主要部分:

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

相关文章：