Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Performing live serach using AJAX and PHP

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 205
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: