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

私はあなたのフィドルでしばらく遊んだ。
クールな問題です。

私は前/次の結果にスクロールするために上下矢印を使用することに決めました...
Enterキーまたはボタンの代わりに。ここで

私が変更主要部である：

$("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を見てください。