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
[php]
<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="<style>" title="<style>" />
<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="<script>" title="<script>" />
</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>
[/php]
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]
<?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; ?>
[/php]
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 because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Shrinking Navbar Resize When Scrolling Down – Jquery Tutorial
- Online Election System Project In PHP
- Multiple Select DropDown List Tutorial in PHP and Jquery
- Auto-Complete Email Address Form Using Jquery Plugin
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
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.