Q:

None live search Data using Ajax?

Hello I am currently working on a project and have managed to connect a very big size database to a website and use ajax live search to search for data from the database. However I have been looking everywhere to find a none live version of the ajax live search. The current one displays all the data from the database on the webpage which is fine if i have small data in the database but I want the page to only show data when user searches and enters or just when searches. Same functions as what the current ajax live search does just without having to display data on the webpage without user searching first. This is the javascript code from ajax live search:

$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});

I am wondering what change i can make to make it so when i visit the page no data is being displayed unless i search using the searchbox ?

A:

To avoid loading data before a search is made, you need to remove the function call at the beginning of your script:
$(document).ready(function(){
    load_data(); // this line needs to be removed
    ...
}

When you explicitly call a function, it gets executed. Being wrapped in $(document).ready() it's instructing the browser to run the function when the page loads.
If you wish to remove the data once the search box is cleared, you need to modify your event handler like so:
if (search != '') {
    load_data(search);
} else {
    // this is where "load_data();" used to be
    $('#result').html('');
}

This replaces any content that might have been appended to the displaying element in a previous search.

