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 > |
Did You Enjoy this Article ?
If yes, Then enter your email below to get
more such great articles in your inbox
For FREE !
Related Posts:
- Simple PHP Search Engine Script Tutorial
- How to become a good PHP Web Developer?
- AJAX Auto Complete Feature Like Google, Facebook With PHP, MySQL
- JavaScript keypress, keydown and keyup events with working example
- Live Username Availability Checker With PHP, MySQL, AJAX and jQuery
- Best Tools For Testing PHP Code Online
Labels:
AJAX,
JavaScript,
PHP
Subscribe to:
Post Comments (Atom)
its showing error in ur Suggest.js At Line no. 55.
ReplyDeletei try To rectify bt Did't Get , U solve it and reply fast.
Hey Apoorv kapil,
DeleteSorry 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...
how can i get the searched value in textbox via aero(nevigation key)????
ReplyDeleteIt does not work.
ReplyDeleteWhich part is not working can you please tell properly..
Deleteit was not working
ReplyDeleteWhere do you get the error please tell me..its working fine for me...
Deletei got error on line
ReplyDeletewhile($suggest = mysql_fetch_array($suggest_query))
error : Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in
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...
DeleteCode is working fine.
ReplyDeleteIf anyone having problem please check the copied code twice, some times junk spa n tag appears on line 2 in your copied code