Search bar that detects typing

Question

I want to create a search bar for my website where it can detect input from the user in the form of typing. How do I start going about this such that when the user starts typing he/she immediately types on the search bar. I am familiar with autofocus, however what I am looking for is automatic redirection upon typing even when the user has clicked something else on the page such that the cursor on autofocus is not on the search bar any more. Is this possible? How does the browser detect typing?

Thanks in advance!

You can detect changes with events: http://stackoverflow.com/a/6458946/1781026 — chrki, Dec 16 '15 at 12:07

Grigoris Dimopoulos · Answer 1 · 2015-12-16T13:15:19.667

4

I think that you can catch keypress and then set autofocus on your search bar. Something like this

document.onkeypress = function (e)
 {
    document.getElementById("searchBar").focus();
};

edited Dec 16 '15 at 13:15

answered Dec 16 '15 at 12:15

Grigoris Dimopoulos

124
6

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

You can use

document.addEventListener("keypress", setFocus);

Where setFocus is a function that sets the focus to the input field.

function setFocus(){
    document.getElementById("search-field").focus();
}

If you are familiar with jQuery you can use

$( document ).keypress(function() {
  $("#search-field").focus();
});

here is the documentation - keypress

Inside the function you can set the focus on the input field.

Amusing that your search field has an id search-field.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 16 '15 at 12:09

gyosifov

3,193
4
25
41

-1. No need to add JQuery to do this simple job! Besides, you're only addressing the issue on how to capture a keypress, not the issue reggarding focusing the element and writing on it. See my answer for clarification – tfrascaroli Dec 16 '15 at 12:28
I'm reverting the -1, and deleting my answer in lieu of this one. Now it's complete :D – tfrascaroli Dec 16 '15 at 12:35
@TIMINeutron I believe you may find this funny https://howtodoinjava.files.wordpress.com/2013/04/use-jquery.gif – gyosifov Dec 16 '15 at 12:37
OMG.... for real. I agree, JQuery is great, but we shouldn't overuse it, and definitely should not answer a clearly non-jquery answer using the library, unless extremely necessary. And if so, we must first at least introduce the library and explain why we must use it, the OP might have 0 idea what a library is, for all we know. But your answer is complete now ;) – tfrascaroli Dec 17 '15 at 10:19
You might want to consider ignoring a few keys outside of the search bar: the cursor and space keys can be used to scroll, when selecting text you can modify the selection with shift + cursor keys. – Gerald Schneider Dec 17 '15 at 10:26

anshabhi · Answer 3 · 2015-12-16T13:12:52.033

1

     <body onkeydown = "addValue(event)">
        <input type = "text" id = "search" value = ' '/>
        </body> // The body part


     <script>
        var search = document.getElementById ("search");

        function addValue (a){

        search.value+= String.fromCharCode(a.keycode);}
</script>

My attempt :) This will add value regardless of which element has been focused or clicked.

edited Dec 16 '15 at 13:12

answered Dec 16 '15 at 12:20

anshabhi

423
6
29

Search bar that detects typing

3 Answers3