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

KakambaWeb · Accepted Answer · 2010-07-27 00:50:23Z

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

thanks, this works but what if i want to display the results in the #bquote container? also, since it's getting the data, there's no indication that it's fetching the data in the background. where i would display the loadeR?

jakeisonline · Accepted Answer · 2010-07-27 00:05:53Z

1

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

edited Jul 27, 2010 at 0:05

answered Jul 26, 2010 at 23:48

jakeisonline

1,2061 gold badge11 silver badges24 bronze badges

1 Comment

input Over a year ago

thanks! what if i want to display the results in the #bquote container?

PIM · Accepted Answer · 2010-07-26 23:45:06Z

0

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

answered Jul 26, 2010 at 23:45

PIM

3141 silver badge3 bronze badges

Collectives™ on Stack Overflow

passing search parameter through jquery

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related