How to create a search button for existing code that does a keystroke search? PHP / JavaScript / MySQL

Question

I have a site that someone else has encoded me, and I'm trying to figure out how to change a simple thing.

I am not a webdeveloper, but in recent days I got a little familiar with php, mysql and javascript (I am familiar with java).

**** Question: **** On my website I have a search form that works without a search button (the search function works when you click on input or when choosing from autocomplete). How to change it to work only with the search button?

A web interface developed using the CodeIgniter framework.

Here's what the controller looks like:

public function searchGym()
{
if($_POST)
{
$gym_name=$_POST['gym_name'];
$gym_name=trim($gym_name," ");  
$data['details']=$this->user_model->getGymByName($gym_name);
$data['gym_name']=$gym_name;
$this->load->view('he/searched_gym',$data);
}
}

code>

Here's what the model looks like:

 public function getGymByName($query_string)
 {
    $query_string=mysql_real_escape_string($query_string);
    $query=$this->db->query("select * from gym_members_table where member_title like '%$query_string%'");
    return $query->result_array();
 }
</code> 

And this is the index.php search form:

            <div class = "search-home">

              <input type="text" onkeypress="gymhandle(event);" class="form-control gym_search" id="gym" name="gym" placeholder="
Search by Name
              " >
              <div class="autosuggest1"></div>
              <div class="autosuggest"></div>

            </div>


  <script>


function settextbox(rval){

  $('.autosuggest').hide();

    $('#gym').val(rval);
    $('#gym_search2').val(rval);
    searchGymByName(rval);

  }



$(document).ready(function(){



  $('.autosuggest').hide();

  $('#gym').keyup(function(e)
    { 



       var code = (e.keyCode || e.which);

    // do nothing if it an arrow key
    if(code == 37 || code == 38 || code == 39 || code == 40 || code==13) {
        return;
    }


     var search_term = $(this).val();


     var getdata = { 'search_term': search_term};

       if(search_term!=''){

       $.ajax({ 

          url: "<?php echo site_url('hebrew/searchGymAuto');?>",

          data: getdata,

          type: 'POST',

          success: function(data){

          $('.autosuggest').show();

          $('.autosuggest').html(data);

          }

          });

       }

       else

       {

        $('.autosuggest').hide();

       }

  });



});

$('.autosuggest').hide();



function searchGymByName(rval)

{
$('.autosuggest').hide();
var gym_name=rval;


$.ajax({

  url:"<?php echo site_url();?>hebrew/searchGym",

  type: "POST",

  data:{gym_name: gym_name},

  success:function(res){
    $('html, body').animate({ scrollTop: 0 }, 0);
    $("#ajax-map").hide();

    $("#city").val('');

    $("#city1").val('');

     $("#ajax-page-hide").show();

    $("#ajax-page-hide").html(res);

  } 

});

}

>

!!

Answer 1

:

$('.gym_search').keypress(function(e){
    if ( e.which == 13 ) return false;
    //or...
    if ( e.which == 13 ) e.preventDefault();
});

Answer 2

id id = "gym" . $('# gym'). ( (e) [: 'click' "keyup" ], search_term

var search_term = $("gym_search").val();

Answer 3

onkeypress . ajax java script