AJAX

Search data Using ajax without press search button??

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2008

Posts: 296

Reputation: Aamit has a little shameless behaviour in the past

Solved Threads: 11

Aamit

Offline

Posting Whiz in Training

Search data Using ajax without press search button??

Nov 21st, 2008

Hi,
I want to search data using Ajax php without pressing on search button.

How to do that??

any script or link demo or sample code ???

i want do this search like orkut search means design ??

plz help me??

•

Join Date: Sep 2005

Posts: 1,083

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Search data Using ajax without press search button??

Nov 21st, 2008

•

Originally Posted by Aamit

Hi,
I want to search data using Ajax php without pressing on search button.

How to do that??

any script or link demo or sample code ???

i want do this search like orkut search means design ??

plz help me??

You'll need to know a bit of JavaScript.

Basically, on each type of a few characters into the search input, you send the search to the server, and load the results.

eg: HTML

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<input id="search_input" />
<div id="results"></div>

eg: JS

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script>
window.onload = function() {
  var inputbox = document.getElementById('search_input');
  inputbox.onkeyup = function(e) {
    e = e || window.event;
    keycode = e.keyCode || e.which;
    if (keycode == 13 || this.value.length%3 == 0) {
      doSearch(this.value);
      return;
    }
  }
};
 
</script>
<script>
window.onload = function() {
  var inputbox = document.getElementById('search_input');
  inputbox.onkeyup = function(e) {
    e = e || window.event;
    keycode = e.keyCode || e.which;
    if (keycode == 13 || this.value.length%3 == 0) {
      doSearch(this.value);
      return;
    }
  }
};

</script>

Explanation:

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<input id="search_input" />

is our search inputbox. It is a DOM element, which allows JavaScript to attach event listeners to it.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
window.onload = function() {
// ...
};
window.onload = function() {
// ...
};

In the javascript we first attach an event listener to the window Object, to listen for the onload event. The onload event fires when the browser completely loads the page.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
window.onload = function() {
  var inputbox = document.getElementById('search_input');
  inputbox.onkeyup = function(e) {
    // ...
  }
};
window.onload = function() {
  var inputbox = document.getElementById('search_input');
  inputbox.onkeyup = function(e) {
    // ...
  }
};

Then in the window onload, we attach an onkeyup event listener to the search inputbox. We do this after the window has loaded to make sure the inputbox has been loaded.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  inputbox.onkeyup = function(e) {
    e = e || window.event;
    keycode = e.keyCode || e.which;
    if (keycode == 13 || this.value.length%3 == 0) {
      doSearch(this.value);
      return;
    }
  }
  inputbox.onkeyup = function(e) {
    e = e || window.event;
    keycode = e.keyCode || e.which;
    if (keycode == 13 || this.value.length%3 == 0) {
      doSearch(this.value);
      return;
    }
  }

Then we add the code for the onkeyup event listener.

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

e = e || window.event;

e refers to the Event that we are observing. The Event should be passed to our event listener function as the first parameter, but if it isn't, we can can retrieve it from the global Event, window.event.

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

keycode = e.keyCode || e.which;

Each key on the keyboard has a corresponding keycode, so we retrieve the keycode from the event. It can either be e.keyCode or e.which so we cater for that by using e.which if e.keyCode is undefined.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 if (keycode == 13 || this.value.length%3 == 0) {
      doSearch(this.value);
      return;
    }
 if (keycode == 13 || this.value.length%3 == 0) {
      doSearch(this.value);
      return;
    }

If the keycode is 13 (ENTER was pressed) or the length of the search text is a multiple of 3, then we do the search.

The multiple of 3 part is what triggers the search each time you type in 3, 6, 9... etc. chars. It's up to you how many should trigger the search.

The doSearch function should to an XMLHttpRequest to the PHP script that does the search, and add the results to the screen dynamically.

XMLHttpRequest can be a bit complicated so it is best to use a XMLHttpRequest Library or Wrapper that will abstract the actual browser dependent code for you and keep your code simple.

My example is based on: http://code.google.com/p/xhr/

So you doSearch could look like:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function doSearch(txt) {
 new fiji.xhr('post', 'search.php', function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById('results').innerHTML = this.responseText;
  }
 }).send({q: txt});
}
function doSearch(txt) {
 new fiji.xhr('post', 'search.php', function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById('results').innerHTML = this.responseText;
  }
 }).send({q: txt});
}

What this does is create a new XMLHttpRequest to the page search.php passing it the query as {q: txt} which is just an object, with the property q which is equal to txt. txt is your search.

The server would receive a POST request with the parameters:

q=txt

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
if (this.readyState == 4 && this.status == 200) {
if (this.readyState == 4 && this.status == 200) {

this refers to the XMLHttpRequest object instance. the readyState property will be equal to 4 when the request has completed. The status property reflects the HTTP response status, 200 means everything went ok.

document.getElementById('results').innerHTML = this.responseText;

When the XMLHttpRequest completed, we just take the response from the server and insert it into the <div id="results"> Element.

The PHP side is just a normal search page. It should return just the search results, without other HTML for a page.

eg: search.php

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?php
 
$search = $_POST['q'];
 
$query = "select * from articles where title like '%".mysql_real_escape_string($search)."%' LIMIT 1, 10";
 
$results = $mysql->query($query); // pseudo query
 
foreach($results as $result) 
{
  echo '<div><a href="#">'.$result->title.'</a></div>';
}
 
 
?>
<?php

$search = $_POST['q'];

$query = "select * from articles where title like '%".mysql_real_escape_string($search)."%' LIMIT 1, 10";

$results = $mysql->query($query); // pseudo query

foreach($results as $result) 
{
  echo '<div><a href="#">'.$result->title.'</a></div>';
}


?>

This just does a search of the database table articles for a title similar to the search.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!