8.72 K
FOLLOW

Find as you type - 1

Now that we have a basic idea how the autocomplete works let us remove the "AUTOCOMPLETE" button and try to find as you type. We will also improve the code so that minimum AJAX calls are made. The tutorial accompanies demo and examples at AJAX AUTOCOMPLETE EXAMPLE

I will jump straight to last part as it will cover almost all previous parts and is an improvement to all previous scripts. You are free to view the source of those web-page for better understanding of the Javascript code. Yet again breaking into 4 parts :

(A) AUTOCOMPLETE HTML
An "onkeyup" event has been attached to the textbox for activating the autocomplete and removal of the "AUTOCOMPLETE" button.
Another input text-box "thetxtid" added to prevent default form submission by clicking enter key. For tutorial is made visible as it will also get the blog_id of the returned blog title, in actual use "thetxtid" should be hidden from the user.
A div with class "bahar" added to align the dropdown div below the textbox.
<form name="autcomplete_form" AUTOCOMPLETE="off" ID="autcomplete_form">
Option ID (will be filled automatically after selection of option): <input type="text" name="thetxtid" id="thetxtid" style="" /><br/>
  AutoComplete Text Box: <br/>
  <input type="text" name="autocomplete_value" id="autocomplete_value" style="width:500px;" onkeyup="ajax_autocomplete(this.value,event);"/>
  <div class="bahar"><div class="hide" id="dropdown"></div></div>
  </form>
(B) AUTOCOMPLETE CSS
"dt" and "marker" are classes with "marker" having additional characteristic of highlighting the background.
"marker" class highlights the selected option by arrow keys.
div:hover highlights the selected option by mouse.
"hide" will hide any element with this class, in our case the "dropdown" element.
"bahar" is a div created with relative positioning. Any element with absolute positioning can be controlled within it.
"show" will make the "dropdown" div visible with absolute positioning and high z-index so that it acts like a dropdown option.

All the highlighting, showing and hiding of dropdown box is done by changing the class name of elements by using Javascript
<style type="text/css">
.dt,.marker{margin:1px;padding:1px;}
#dropdown div:hover{font-weight:bold;background:#DFEBFD;}
.marker{font-weight:bold;background:#DFEBFD;}
.hide{display:none;}
.bahar{position:relative;margin:0;padding:0;}
.show{display:block;border:1px solid;margin:0;padding:0;width:500px;position:absolute;background:#fff;z-index:10;height:200px;overflow:auto;}
</style>
(C) AUTOCOMPLETE PHP
As told before, most action in autocomplete is primarily because of Javascript and only the data fetched and returned by server requires server side programming. This server side programming can be in any language PHP, ASP, JSP etc. In my case I am using PHP as shown below.

While the data returned by Server can also be pre formatted like I was doing in previous AJAX AUTOCOMPLETE EXAMPLE. This approach is not advisable as we need to get the raw data for local caching and searching and filtering on the client side (read browser). Hence pre formatting will ad another complexity.
I am sending each blog id and title separated by string "---". Each such data is again separated by "***". Hence we can separate the data easily using Javascript.
If there is no result in the database then the server returns '<span class="errors">Nothing Found</span>'.
<?php
$con = @mysql_connect($host,$user,$pwd);
$matter=strip_tags(mysql_real_escape_string($_GET["m"]));
$query_t="SELECT blog_id,Blog_Title FROM database.Posts WHERE Blog_Title LIKE '%$matter%' LIMIT 0,100";
$result_t= @mysql_query($query_t,$connection);
if(mysql_num_rows($result_t)>0)
{while($mydata_t = @mysql_fetch_array ($result_t))
{$res[]="$mydata_t[blog_id]---".stripslashes($mydata_t[Blog_Title]);}
echo join('***',$res);}
else {echo '<span class="errors">Nothing Found</span>';}
?>