mardi 28 juin 2016

mark.js - Live Search then automatically Scroll to text on page

I started using mark.js live search plugin, but now I'm clueless about a few things. The developer documentation is weak, it doesn't explain what each part does and I'm having to guess everything here. I'm trying to find out how to automatically scroll to a text on the page while the user types in the search box. The result is something similar to what the browser search does.

Let's say I have the following structure:

SEARCH BOX |___________|
123
456
789
abcde
fghi
jklmno
pqrst

Then the user performs a search in the in-page search field:

SEARCH BOX |_jklmno____|
    123
    456
    789
    abcde
    fghi
    jklmno <--- The page will automatically scroll to here, in real time.
    pqrst

I tried using:

   $('body').animate({
                    scrollTop: $("input[name='keyword']").offset().top -30
                }, 200);

But it didn't work properly.

Here's the Fiddle (In order to see the search field, you have to scroll the result tab a little bit)

And here's the jQuery:

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

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

    /*
    var container = $('body'),
        scrollTop = $("input[name='keyword']");

    container.scrollTop(
        scrollTop.offset().top - container.offset().top + container.scrollTop()
    );

    */


     /*
        $('body').animate({
                        scrollTop: $("input[name='keyword']").offset().top -30
                    }, 200);

    */  

    /*     */
        // Determine selected options
        var options = {


         "filter": function(node, term, counter, totalCounter){
            if(term === keyword && counter >= 1){
                return false;
            } else {
                return true;
            }
        }





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

     });

Aucun commentaire:

Enregistrer un commentaire