passant le paramètre de recherche à travers jquery

Question

J'ai un formulaire dans lequel si l'utilisateur entre la requête de recherche, son paramètre devrait être passé par jquery et après avoir obtenu les résultats, il devrait charger les résultats dans le conteneur div. puisque je ne suis pas très bien au courant de jquery, comment ferais-je cela?

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 [en utilisant OOP]:

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

classe php:

$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

je ferais de cette façon:

$(".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:

Pour mettre un chargeur vous devez vérifier ici:

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

Et pour montrer une image de chargeur par exemple:

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

Et pour le cacher lorsque l'appel ajax est complet:

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

Answer 2

Au lieu d'utiliser $ _POST, vous pouvez utiliser $ _GET ou $ _REQUEST comme le suivant:

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

Ensuite, en PHP, remplacez

$_POST 

... avec

$_GET 

Answer 3

Si vous voulez aller dans le sens ajax ...

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

Lire sur jQuery.ajax() et si vous activez ce champ de recherche, utilisez jQuery.serialize()