passing search parameter through jquery

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

Instead of using $_POST, you can use $_GET or $_REQUEST like the following:

var searchString = $(".bsearch").val();
$("#bquote").load("path_to_php_file.php?search="+searchString);

Then, in PHP, replace

$_POST

...with

$_GET

Answer 2

If you want to go down the ajax route...

$(".bsearch").keydown(function() {

    // Get the current input value
    var value = $(this).val(); 

    //pass the parameter to the php page
    $.ajax({
       type: "POST",
       url: "some.php", // replace this with the right URL
       data: "bsearch=" + value,
       success: function(msg){
          $("#search").html(msg);
       }
    });         
});

Read up on jQuery.ajax() and if you turn that search box into a proper form, utilize jQuery.serialize()

Answer 3

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();
 });