Auto Search Suggestion Using PHP and AJAX



Auto Search Suggestion Using PHP and AJAX

Hello Friends, several times our client wants an auto suggestion search form which is very fast and sturdy. So today I will show you how to build an auto search suggestion using php and ajax. Ajax is used to communicate with web pages and web servers. Below example demonstrates a search field built using Ajax.

STEP 1:

Create index.php file which opens a file named php_ajax.php by using with GET method

<html>
   <head>      
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20span%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20green%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20function%20showHint(str)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(str.length%20%3D%3D%200)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22txtHint%22).innerHTML%20%3D%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20xmlhttp%20%3D%20new%20XMLHttpRequest()%3B%0A%09%09%09%09%09%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xmlhttp.onreadystatechange%20%3D%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(xmlhttp.readyState%20%3D%3D%204%20%26%26%20xmlhttp.status%20%3D%3D%20200)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22txtHint%22).innerHTML%20%3D%20xmlhttp.responseText%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xmlhttp.open(%22GET%22%2C%20%22php_ajax.php%3Fq%3D%22%20%2B%20str%2C%20true)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xmlhttp.send()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
   </head>
   <body>
<b>Search your favourite tutorials:</b>

<form>
    <input type = "text" onkeyup = "showHint(this.value)">
</form>

Entered Course name: <span id="txtHint"></span>
</body>
</html>

 

STEP 2:

Now create a ‘php_ajax.php’ file. It will contain array of course names and it returns the value to web browser.

<?php // Array with names $a[] = "Android"; $a[] = "B programming language"; $a[] = "C programming language"; $a[] = "D programming language"; $a[] = "euphoria"; $a[] = "F#"; $a[] = "GWT"; $a[] = "HTML5"; $a[] = "ibatis"; $a[] = "Java"; $a[] = "K programming language"; $a[] = "Lisp"; $a[] = "Microsoft technologies"; $a[] = "Networking"; $a[] = "Open Source"; $a[] = "Prototype"; $a[] = "QC"; $a[] = "Restful web services"; $a[] = "Scrum"; $a[] = "Testing"; $a[] = "UML"; $a[] = "VB Script"; $a[] = "Web Technologies"; $a[] = "Xerox Technology"; $a[] = "YQL"; $a[] = "ZOPL"; $q = $_REQUEST["q"]; $hint = ""; if ($q !== "") { $q = strtolower($q); $len = strlen($q); foreach($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; }else { $hint .= ", $name"; } } } } echo $hint === "" ? "Please enter a valid course name" : $hint; ?>

Finally, our code is completed and now you can hit the url to check the output. Thanks for watching this tutorial.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

 

Bonus: We also give training on following topics:

                       1. PHP Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.

and many more.