Is it possible to simulate a Ctrl+F key combination using Jquery?

Question

I have a page with a lot of information in it, and it would be nice if the user clicked on a link and the the browser search bar popped out as it would if they pressed Ctrl+F. I could query the database, since the information cames from there, but I don't want to reload the page on link click.

http://stackoverflow.com/questions/832059/definitive-way-to-trigger-keypress-events-with-jquery — Naftali, Sep 07 '11 at 18:31
possible duplicate of [Use Browser Search (Ctrl+F) through a button in website?](http://stackoverflow.com/questions/8080217/use-browser-search-ctrlf-through-a-button-in-website) — Sheepy, Sep 24 '15 at 04:25

score 9 · Accepted Answer · answered Sep 07 '11 at 18:36

9

Some browsers support window.find()

answered Sep 07 '11 at 18:36

epascarello

204,599
20
195
236

2

That seems like the way to go. I just tested it in FF, Chrome and IE9. – Alex Turpin Sep 07 '11 at 18:38
@epascarello Suppose the text that I'm looking for is present at multiple places. Is there any way to get the count? – Tejas Chandrashekhar Jan 14 '20 at 09:01

score 5 · Answer 2 · edited Oct 23 '18 at 03:29

I know this post is old but i think i solved this using jquery:

 //i am assuming you are searching through a table...
    //search input field listening for key pressed
    $('.search_input').keyup(function (e) {
        //listening if the key pressed is the enter button
        if (e.which === 13) {
            //inserting the value of textfield content, you can add if statement to check if the field is null or empty
            var search_param = $(this).val();
            //value of field stored into a variable
            $('tr').removeClass('item_found');
            //remove item_found class attributed to a td AND search all td to find the one that march the search parameter
            if ($('td:contains("' + search_param + '")').html() !== undefined) {
                //if there is any td that has that record... then check for the closest tr and add a class with item_found as value
                $('td:contains("' + search_param + '")').closest('tr').attr('class', 'item_found');
                //add some highlight to it.
                $('td:contains("' + search_param + '")').closest('tr').css({background:'yellow',color:'black'});
                //then scroll to the item
                $(window).scrollTop($('.item_found').first().offset().top);
            } else {
                //if item is not found display no result found
                alert("Sorry no result found")
            }
        }
    });

I have found 2 bugs which I suggested as edit. Additionally, I have improved your code a bit: https://jsfiddle.net/1shqekzt/ : Making use of CSS, don't allow empty search and made search case-insensitive. Idea for further imporvement: Add a submit button which can be used in addition to the Enter key. — Daniel Marschall, Oct 22 '18 at 21:53

score 2 · Answer 3 · answered Sep 07 '11 at 18:32

2

There are some plugins that let you do this, for example: https://github.com/jeresig/jquery.hotkeys

answered Sep 07 '11 at 18:32

Serj Sagan

28,927
17
154
183

Is it possible to simulate a Ctrl+F key combination using Jquery?

3 Answers3