Find and scroll to element

Question

Hello everyone ! I am coding a board based on bootstrap3. There's a database filled with the sound infos and I'm creating divs from it. I'd like to add a search bar which find the element in the page and scroll to it. I've already looked on jquery.scrollTo or javascript but I can't find how to do it !

Here's the search form I'd like to use :

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

And here's what the body looks like :

  echo "<div id='EPsound".$j."' name='".$name[$j]."' class='col-md-6'></br>"; //créer une div pchq son
            echo "<div class='sound center-block'>";
                echo "<img src=".$artwork[$j]." class='img-thumbnail center-block' />";
                echo "<span>$name[$j]</span>";
                echo "<i class='fa fa-play fa-3x play' onclick='$onclickplay'></i>";
                echo "<i class='fa fa-plus fa-3x plus' onclick='$onclickqueue'></i>";
            echo "</div>";
  echo "</div>";

Thank you so much for your help !

yes! like "Jeff Beck", then hit the Search button, and it will scroll to the appropriate div ! — gmolveau, Apr 22 '14 at 14:22
I think you should see this question: http://stackoverflow.com/questions/6677035/jquery-scroll-to-element?rq=1 — Raúl Otaño, Apr 22 '14 at 14:28

avetisk · Answer 1 · 2014-04-22T15:43:34.047

0

// Grab all the result containing the name
var list = $('.sound span'); // you should add a better scope

// Whenever user type in the input field...
$('.navbar-form input').on('keyup', function (e) {
   var regex = new RegExp(e.currentTarget.value, 'ig');

   // ...try to find if any element is matching typed text
   for (var i = 0, len = list.length; i < len; i += 1) {
     list[i].name.toLowerCase().match(regex) && list[i].scrollIntoView();
     break; // stop when found
   }
});

edited Apr 22 '14 at 15:43

answered Apr 22 '14 at 14:27

avetisk

9,795
4
23
36

Thank's ! How do I implement this ? – gmolveau Apr 22 '14 at 14:37
I've found this : http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/ but I'm getting trouble in implementing it ! – gmolveau Apr 22 '14 at 14:38
I added some comments – avetisk Apr 22 '14 at 15:44

Satwik Nadkarny · Answer 2 · 2014-04-22T14:54:03.877

JavaScript:

If you are looking for a pure JavaScript solution, you could make use of the

scrollIntoView()

method.

To use it, you would need the 'element' on which you want to apply it. Hence, you would apply it as such:

document.getElementById("elementID").scrollIntoView();

You can take a look here: http://jsfiddle.net/yYq39/1/

These method just brings the said element into focus immediately. So the overall effect from a user's perspective is not all that nice!!!

JQuery:

If you are looking for a smooth scroll to the said element, you could make use of Jquery's ScrollTop function:

You would use it this way:

$("#btnScroll").click(function() {
    $("html, body").animate({ scrollTop: $("#block2").offset().top }, 500);    
});

You can have a look here: http://jsfiddle.net/3ak6L/

Hope this helps!!!

Find and scroll to element

2 Answers2