Question

greetings,

I have a bunch of <li> items inside a div, the div is scrollable

I would like to have a text box to mark the first li containing a certain text from a textbox and search button.

and the li should became visible 🙁

I have no clue how to do this 🙁

Answer 1

Live Demo Updated with scrolling

Markup

<div id='test'>
    <ul>
         <li>Text</li>
         <li>Something</li>
         <li>Hey</li> 
         <li>der</li>
         <li>herp</li>
         <li>derp</li>
         <li>Testing</li>
    </ul>
</div>

JS

$('#searchBtn').click(function(){
    var searchString = $('#searchText').val(),
        foundLi = $('li:contains("' + searchString + '")');

    foundLi.addClass('found');
    $('#test').animate({ scrollTop: foundLi.offset().top});
});