-
Performing live serach using AJAX and PHP
over 8 years ago
Here in this blog i have used AJAX to search and provide result on the whenever user enter any character in the textbox. The result is coming from a PHP page. Ajax search is used for making the code easy to understand and for saving the users time, here is simple line of AJAX code which search the value from the array and display result in the form of a list. For example a user enter the first letter of string in the text box and it will display the result related to that character.
Benefits of using Ajax search:
1. Results are shown as you type in the input box.
2. Results narrow as you continue typing the text.
3. If results become too narrow or less, remove characters to see a broader result.Html source code :
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").keyup(function(){ var val=$("input").val(); $.ajax({ url:"response.php", data :{ character : val}, success:function(result){ $('#div').text(result); }, error:function(){ alert("An error occured: " + xhr.status + " " + xhr.statusText); }}); }); }); </script> <style> span { color: green; } </style> </head> <body> <p><b>Search your favourite tutorials:</b></p> <form> <input type = "text"> </form> <p>Entered Course name: <span id="div"></span></p> </body> </html>Here is PHP code:
<?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"; $data = $_REQUEST["character"]; $response = ""; if ($data !== "") { $len = strlen($data); $response= "<ul>"; foreach($a as $name) { if (stripos($name,$data)!==false) { $response .= "<li>".$name."</li>"; } } $response .= "</ul>"; echo $response; } ?>Here is result:
0 Comment(s)