Tuesday 17 September 2013

ajax-auto-complete-feature-like-google

AJAX Auto Complete Feature Like Google, Facebook With PHP, MySQL - phphunger.com

Wednesday, April 3, 2013

AJAX Auto Complete Feature Like Google, Facebook With PHP, MySQL

When i am working on one of my project, i need to work on AJAX. So i started googling about AJAX how to's. So i started learning AJAX slowly and steadily. After completion of learning AJAX i started working on AJAX Auto complete suggest feature. So i tried hard to work on that finally i got the solution from one of the online resource. I hope you are also one of the guy who is looking for such kind of solution. So i thought i should share this to my online users. One thing every one should get this in their mind that what actually an AJAX Auto complete is? Perhaps i too didn't have any idea but after working on that i came to know.

So let's see what an AJAX Auto complete suggest is? As a web developer almost all us in our daily life, use Google at its best. When we start googling like "how to" or "AJAX tutorial" etc then the Google will show some results beneath its search text box. See below picture for better understanding. So this feature is called as AJAX Auto complete Suggest Feature. Now a days all of the websites have this feature.


Now Let's see how to design such an application.

Step 1: Design the Database. 

See the below picture for better understanding of database design. In this tutorial, i have just created one table for demonstration purpose. The process is same for the bigger database also. In this tutorial i assumed the database name as "phphunger_ajax_autocomplete" and table name as "games". Change the names as your wish.


Create the table as "games"

1
2
3
4
5
CREATE TABLE IF NOT EXISTS `games` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`name` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

Dump some data into the table "games"

1
2
3
4
5
6
7
INSERT INTO `games` (`id`, `name`) VALUES
(1, 'Angry Birds'),
(2, 'Angry Birds Space'),
(3, 'Angry Birds Space Battle'),
(4, 'Babe Rescue'),
(5, 'Ball Defence'),
(6, 'Ball Defence  2');

Once the database design phase is over the next step is to design the front end for the user from where he starts searching the content.

Step 2: Design the HTML Form

Here add one Textbox on the HTML Form which communicates with AJAX and fetches data from the back-end to the front-end. See below picture how the form looks like. Name the file as "index.html"


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
  <script language="JavaScript" type="text/javascript" src="suggest.js"></script>
  <title>AJAX Autocomplete With PHP - phphunger.com</title>
</head>
<body>
Simple AJAX Search Suggest:
<form id="suggestSearch">
<input type="text" id="dbTxt" alt="Search Criteria" onKeyUp="searchSuggest();" autocomplete="off"/>
<div id="layer1"></div>
</form>
</body>
</html>

Step 3: Write AJAX Code

Write some javascript code which includes the AJAX Request, Response logic. See below code. Name the file as "suggest.js"

suggest.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function getXmlHttpRequestObject() {
 if (window.<span id="IL_AD12" class="IL_AD">XMLHttpRequest</span>) {
  return new XMLHttpRequest();
 } else if(window.ActiveXObject) {
  return new ActiveXObject("Microsoft.XMLHTTP");
 } else {
  alert("Your Browser Sucks!");
 }
}
 
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
 
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
 if (searchReq.readyState == 4 || searchReq.readyState == 0) {
  var str = escape(document.getElementById('dbTxt').value);
  searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
  searchReq.onreadystatechange = handleSearchSuggest;
  searchReq.send(null);
 }
}
 
//Called when the AJAX response is returned.
function handleSearchSuggest() {
 if (searchReq.readyState == 4) {
         var ss = document.getElementById('layer1');
  var str1 = document.getElementById('dbTxt');
  var curLeft=0;
  if (str1.offsetParent){
      while (str1.offsetParent){
   curLeft += str1.offsetLeft;
   str1 = str1.offsetParent;
      }
  }
  var str2 = document.getElementById('dbTxt');
  var curTop=20;
  if (str2.offsetParent){
      while (str2.offsetParent){
   curTop += str2.offsetTop;
   str2 = str2.offsetParent;
      }
  }
  var str =searchReq.responseText.split("\n");
  if(str.length==1)
      document.getElementById('layer1').style.visibility = "hidden";
  else
      ss.setAttribute('style','position:absolute;top:'+curTop+';left:'+curLeft+';width:250;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;');
  ss.innerHTML = '';
  for(i=0; i < str.length - 1; i++) {
   //Build our element string.  This is cleaner using the DOM, but
   //IE doesn't support dynamically added attributes.
   var suggest = '<div <span id="IL_AD5" class="IL_AD">onmouseover</span>="javascript:suggestOver(this);" ';
            suggest += 'onmouseout="javascript:suggestOut(this);" ';
            suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
            suggest += 'class="small">' + str[i] + '</div>';
            ss.innerHTML += suggest;
 
  }
 }
}
 
//Mouse over function
function suggestOver(div_value) {
 div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
 div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
 document.getElementById('dbTxt').value = value;
 document.getElementById('layer1').innerHTML = '';
 document.getElementById('layer1').style.visibility = "hidden";
}

Step 4: Connect to Database and Fetch Results.

This is the file for database connection and fetching results from table. Name it as searchSuggest.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
<title>AJAX Autocomplete With PHP - phphunger.com</title>
</head>
<body>
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("phphunger_ajax_autocomplete") or die(mysql_error());
 
if (isset($_GET['search']) && $_GET['search'] != '') {
 //Add slashes to any quotes to avoid SQL problems.
 $search = $_GET['search'];
 $suggest_query = mysql_query("SELECT distinct(name) as autosuggest FROM games WHERE name like('" .$search . "%') ORDER BY name");
 while($suggest = mysql_fetch_array($suggest_query)) {
  echo $suggest['autosuggest'] . "\n";
 }
}
?>
</body>
</html>
That's what an AJAX Autocomplete feature. Use this code snippet if your requirement matches. Do play with this code. Happy coding.

Did You Enjoy this Article ?

If yes, Then enter your email below to get

more such great articles in your inbox

For FREE !

  • Free virus protection
  • Online Games
  • At home work

10 comments:

  1. its showing error in ur Suggest.js At Line no. 55.
    i try To rectify bt Did't Get , U solve it and reply fast.

    ReplyDelete
    Replies
    1. Hey Apoorv kapil,

      Sorry for the delayed response...please replace the below code at line 54

      var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
      suggest += 'onmouseout="javascript:suggestOut(this);" ';
      suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
      suggest += 'class="small">' + str[i] + '</div>';
      ss.innerHTML += suggest;

      Now its gonna work...anyhow i have modified the code..please re-check once...thanks for your observation...

      Delete
  2. how can i get the searched value in textbox via aero(nevigation key)????

    ReplyDelete
  3. It does not work.

    ReplyDelete
    Replies
    1. Which part is not working can you please tell properly..

      Delete
  4. Replies
    1. Where do you get the error please tell me..its working fine for me...

      Delete
  5. i got error on line
    while($suggest = mysql_fetch_array($suggest_query))

    error : Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in

    ReplyDelete
    Replies
    1. The code seems to be perfect..i don't know why you get this error...anyhow if you can send the complete code then i will let you know...

      Delete
  6. Code is working fine.

    If anyone having problem please check the copied code twice, some times junk spa n tag appears on line 2 in your copied code

    ReplyDelete

Thank you for reading and commenting...



No comments:

Post a Comment