Search data Using ajax without press search button??

[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??

[digital-ether]

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

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

eg: JS

<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:

<input id="search_input" />

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

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.

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.

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.

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.

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.

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:

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

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

<?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.