Handle the enter key press?

Question

Im modifying someones code so a little bit lost!

I have a html page with a textbox and button (which performs a search)

Is it possible to perform the search when Enter is pressed on the keyboard?

thanks P

<div class="col-md-12">
                <div id='FAQHome'><h3><a href='newFAQ.aspx'>FAQ HOME</a></h3></div><br><br>
                <input id="searchBox" class="searchBox" />
                <input id="searchButton" class="searchButton" type="button" value="SEARCH" />

                <div id="financialServices" class="mainText"></div>
                
            </div>

<script>

window.document.onkeydown = CheckEnter;

function CheckEnter(){

    console.log('CheckEnter' + event.keyCode);

 

}

    $(function(){
        
        $('#searchButton').click(function() {
            
            $('#financialServices').empty();
            

            //do the ajax call ...
            $.ajax ({
        
        url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('FAQs')/items?$top=100&$orderby=Category,Title asc",
        dataType: 'json',
        async: false,
        headers: { "Accept": "application/json;odata=verbose" },
        success: function(data) {
            var htmlMain = '';
            var tabContent = '';

            var theCount=0;
            //search
            console.log('get search results');

            for(var result in data.d.results) {
etc ...

if you wrap the inputs in a form, it will submit on enter, then you can change your event handler to form on submit instead of on submit button click — Pete, Sep 13 '22 at 09:14

Mahesh Kumar · Answer 1 · 2022-09-13T09:53:07.570

You can use Keypress Event in jQuery and JQuery keyCode.

jQuery keypress Event reference : https://api.jquery.com/keypress/

jQuery key code reference : https://www.educba.com/jquery-keycode/

Use Like:

$( "#searchBox" ).keypress(function( event ) {
  if ( event.which == 13 ) {
  get_Search();
  }
  });
     });

Full code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-12">
                <div id='FAQHome'><h3><a href='newFAQ.aspx'>FAQ HOME</a></h3></div><br><br>
                <input id="searchBox" class="searchBox" />
                <input id="searchButton" class="searchButton" type="button" value="SEARCH" onclick="get_Search()" />

                <div id="financialServices" class="mainText"></div>
                
            </div>

<script>
     $(document).ready(function(){

        //use key press event 

       $( "#searchBox" ).keypress(function( event ) {
  if ( event.which == 13 ) {
  get_Search();
  }
  });
     });

     function get_Search() {

        $('#financialServices').empty();

         //do the ajax call ...
          $.ajax ({
        
        url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('FAQs')/items?$top=100&$orderby=Category,Title asc",
        dataType: 'json',
        async: false,
        headers: { "Accept": "application/json;odata=verbose" },
        success: function(data) {
            var htmlMain = '';
            var tabContent = '';

            var theCount=0;
            //search
            console.log('get search results');

}
});
     }


</script>

score 0 · Answer 2 · answered Sep 13 '22 at 09:05

I would suggest that you wrap your input fields in a form element.

<form>
    <div class="col-md-12">
      <div id='FAQHome'><h3><a href='newFAQ.aspx'>FAQ HOME</a></h3></div>
      <br><br>
      <input id="searchBox" class="searchBox" />
      <input id="searchButton" class="searchButton" type="submit" value="SEARCH" />

       <div id="financialServices" class="mainText"></div>
                
      </div>
</form>

...

Handle the enter key press?

2 Answers2