Question 36653 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Handle the enter key press? – Jquery

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 ...
Tags:

2

Answers


  1. 0

    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>

    …

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search