HTML search form allow input text immediately

Question

Possible Duplicate:
Focus Input Box On Load

i need a HTML search form that allow input text immediately. Same as Google. we needn't click to input text into search form

Answer 1

What you are looking for can be achieved a few different ways. The easiest would be via a AJAX POST via jquery. I'll give you a little example:

Let's pretend your search input has a name attribute such as "keywords"

$(function(){  
  $("input[name='keywords']").keyup(function(){
    $(".search_results").slideUp("normal", function(){
      $.ajax({  
        type: "POST", url: "searchquery.php", 
        data: {keywords: $(this).val()},
        success: function(response){
          if(response != "error")
          {
            $(".search_results").html(response);
            $(".search_results").slideDown();
          }
          else
          {
            alert("Error Searching. Please refresh the page and try again.");
          }
        }
      });
    });
  });
});

Then you need to have searchquery.php handle searching the database and returning the data in html format. Maybe something like this:

if(trim($_POST["keywords"]) != "")
{
  $keywords = mysql_real_escape_string($_POST["keywords"]);

  //search the DB for maybe 5 top results and return them in something like a HTML list:
  $results = '<ul><li>first</li><li>second</li></ul>';

  die($results);
}

Your on your own for formatting the div or HTML object with the class "search_results" defined on it.

Also, I would advise adding a timer, so that each time the "keyup" function is hit, it records the time and make a minimum of _ amount of time before the next call to the file is allowed. That way the PHP file doesn't get 5 calls when someone writes 1 word.