Question

I am trying to make a simple search where my goal is to avoid any database calls as I am only searching in a specific list.

I am making a glossary where all words are displayed in a list with more info.
Can I somehow use the :contains selector to go to the word the user had searched for, i.e: “rooftiles”

Like:

$("div:contains('rooftiles')");

Given my example I fill in “rooftiles” in the searchbox and if that word is found it will jump down to that word à la <a name="rooftiles">

Can someone point me in the right direction on how to do this?

Answer 1

$('#search').on('keyup', function(e) {
    // when user press enter
    if (e.which == 13) {
        var val = $.trim(this.value);
        if (val) {
            var target = $('div:contains(' + val + ')').first();
            if (target.length) {
                var top = target.position().top;
                $('body').animate({
                    scrollTop: top
                }, 500);
            }
        }
    }
});​

Demo