CODEWITHSUNDEEP
javascriptphpsearch
sumbreon
sumbreon

Reputation: 3

How to trigger search button on enter click?

I have made a search function with text field and button on my website. I've been trying to activate search on enter press but it doesn't work. I've tried many different methods, but none of them seems to be working. I've read there might be problems with this button not being "default". I am kind of new at this so any help is much appreciated! This is script for search button, return button and search field:

        <div class="w3-top">

        <div title="Clear"><a id="returnbtn" class="aa bb cc">
          <i class="fa fa-eraser"></i>
        </a></div>

        <div title="Search"><a id="searchbtn" class="aa bb cc">
            <i class="fa fa-search"></i>
        </a>

        <a class="aa bb cc">
                        <?php
                        $searchstr='';
                        $sql = "SELECT ID, ISBN, Author, Title, Publisher, ReleaseYear, Barcode FROM Books ";
                        $searchstr='';
                        if (isset($_GET['searchstr'])){
                            $searchstr=strtolower($_GET['searchstr']);  
                        }
                        if($searchstr != ""){
                            $sql.="WHERE LOWER(Author) LIKE '%".$searchstr."%' OR LOWER(Title) LIKE '%".$searchstr."%' OR LOWER(Publisher) LIKE '%".$searchstr."%'";  
                        }
                        echo "<form id='search'>";
                        echo "<input id='searchfield'/ value='".$searchstr."' autocomplete='off'>";
                        echo "</form>";
                        ?>
        </a>
        </div>
      </div>

And this is seach button function

$(document).ready(function(){
 $("#searchbtn").on('click', function(){
        var newLink = UpdateCurrentLink('searchstr', $("#searchfield").val(), null);
        newLink = UpdateCurrentLink('page', 1, newLink);
        window.location = newLink;
}); 
 $("#searchfield").keypress(function(e){
     if(e.which === 13){//Enter key pressed
        $('#searchbtn').click();//Trigger search button click event
    }
 });

Upvotes: 0

Views: 2342

Answers (2)

Sanjay Kumar N S
Sanjay Kumar N S

Reputation: 4739

Catch every body keypress and check whether the pressed key is Enter: Try this:

$(document).ready(function(){
    $("body").keypress(function(e){
        if (e.which === 13){
            alert('Keypress');
            $('#searchbtn').click();
            e.preventDefault();
            return false;
        }
    });
});

Upvotes: 1

Sahid Hossen
Sahid Hossen

Reputation: 1467

$("searchbtn").click() function will not trigger click event. You have to use trigger method. You can try like this- 

 $(document).ready(function(){

   $("#searchField").on('keypress', function(e){
      var code = (e.keyCode ? e.keyCode : e.which);
      if(code == 13) { //Enter keycode
          //console.log('enter press');
          $("#searchBtn").trigger('click')
      }
   })

    $("#searchBtn").on('click', function(e){
       e.preventDefault();
       console.log("on submit clicked");
    })
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  
<body>
<form> 
  <input id="searchField" value=""/>
</form>
<p> <a href="#" id="searchBtn"> Search </a> </p> 
</body>
</html>

Upvotes: 0

Related Questions