How to implement search textbox as in stack overflow website?

Question

I have a search textbox in the web page. When the user presses enter key after entering text in that textbox then the search function should get executed. How to do this?

Answer 1

Check the onkeypress event of this and look for the keycode 13. Once keycode 13 is hit fire a click of a hidden button and do programming on the back end of the event of that hidden button.

Answer 2

If that is the only textfield in your form, then pressing enter causes the onsubmit handler to run. But that will submit the entire page. If you want to perform an ajax command onsubmit and not refresh the whole page, then make sure your onsubmit handler returns false.

To do a regular full page form submit when enter is pressed:

  <form action="/doit">
     <input type="text" value=""/>
  </form>

To do an ajax form submit when enter is pressed, something like this jquery code could be used:

  $("form").submit(function() {
     $.ajax(...);
     return false;
   });

Answer 3

If there's only one input field in a form, then the form will submit when you press enter even if there's no 'Submit' button.

eg

<form action="/search">
    <input type="text" value="search text">
</form>

will submit when enter is pressed.

Answer 4

basically u can do it like this: i like to use jquery for most javascript stuff for cross browsers compatibility.

$("#btnID").keypress(function(event){
            //filter enter key only
            if(event.keyCode == 13){
                //do something here
            }
            return true;
        });

Answer 5

I have implemented this functionality very easily! I have a search textbox and a button whose style ="display:none". These controls are surrounded by an ASP panel, I have set DefaultButton property of the panel as the button's ID. Now on entering text and pressing enter key the search functionality present in the button click event gets executed and also the button is also not visible to the user's!!!