Question

i have a form in which if the user enters the search query, its parameter should be passed through jquery and after getting the results it should load the results in the div container. since i’m not very well-versed with jquery, how would i do this?

html:

    //currently the data is being displayed on pageload:
    $(document).ready(function() {
    $("#bquote").load("quotes_in.php")
   });  

   $(".bsearch")
    .keydown(function() {
    //pass the parameter to the php page

       //display in div #bquote

    });


 <!-- Begin Search -->
        <div id="search" style="display:none;">
                <input type="text" class="bsearch" name="search" value="Search" />
        </div>
<!-- End Search -->

php [using OOP]:

if (isset($_POST["search"])) 
{
    $quotes->searchQuotes();
}

php class:

  $search = $_POST['search'];

  $sql = "SELECT * FROM thquotes WHERE cQuotes LIKE '%"
  .  mysql_real_escape_string($search) ."%' ORDER BY idQuotes DESC";


  try {

  $query = $this->_db->prepare($sql);
  $query->execute();

  if(!$query->rowCount()==0)
  {
   while($row = $query->fetch())
    {
    echo $this->formatSearch($row);
}

Answer 1

I would do in that way:

$(".bsearch").keydown(function() {
  //create post data
  var postData = { 
    "bsearch" : $(this).val(), 
    "anotherParam" : "anotherValue" 
  };

  //make the call
  $.ajax({
    type: "POST",
    url: "yourAjaxUrl.php",
    data: postData, //send it along with your call
    success: function(response){
      alert(response); //see what comes out
      //fill your div with the response
      $("#bquote").html(response);
    }
  });
});

EDIT:

For putting a loader you need to check this here:

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

And to show a loader image for example:

$("#loading").ajaxStart(function(){
   $(this).show();
});

And to hide it when ajax call is complete:

$("#loading").ajaxComplete(function(){
   $(this).hide();
 });