Home PHP AJAX Live Search
Reply: 0

PHP AJAX Live Search

user5040
1#
user5040 Published in April 26, 2018, 1:46 pm

I am trying to implement live search using php ajax and oracle db. But I am not getting results when i type in search box. My table contents are as below,

SQL> select * from search;

    ID NAME

     1 David Copperfield
     2 Ricky Ponting
     3 Cristiano Ronaldo
     4 Lionel Messi
     5 Shane Watson

Please let me know where i have to change my code.

https://imgur.com/a/gp8oL

Code:

1. db.php

<?php

// Create connection to Oracle
$conn = oci_connect("system", "******","//localhost/xe");

//Check connection
if (!$conn) {
   $m = oci_error();
   echo $m['message'], "\n";
   exit;
}
else {
   print "Connected to Oracle!";
}

?>

2. search.php

<!DOCTYPE html>
<html>
<head>
   <title>Live Search using AJAX</title>

   <!-- Including jQuery is required. -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

   <!-- Including our scripting file. -->
   <script type="text/javascript" src="script.js"></script>

   <!-- Including CSS file. -->
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!-- Search box. -->
   <input type="text" id="search" placeholder="Search" />
   <br>
   <b>Ex: </b><i>David, Ricky, Ronaldo, Messi, Watson, Robot</i>
   <br />

   <!-- Suggestions will be displayed in below div. -->
   <div id="display"></div>
</body>
</html>

3. ajax.php

<?php

//Including Database configuration file.

include "db.php";

//Getting value of "search" variable from "script.js".

if (isset($_POST['search'])) {

//Search box value assigning to $Name variable.

   $Name = $_POST['search'];

//Search query.

$query='SELECT Name FROM search WHERE Name LIKE '%Name%'';

//Query execution

   $stid = oci_parse($conn, $query);
   $execquery = oci_execute($stid);

//Creating unordered list to display result.

   echo '

<ul>

   ';

   //Fetching result from database.

   while ($Result = oci_fetch_array($stid)) {

       ?>

   <!-- Creating unordered list items.

        Calling javascript function named as "fill" found in "script.js" file.

        By passing fetched result as parameter. -->

   <li onclick='fill("<?php echo $Result['Name']; ?>")'>

   <a>

   <!-- Assigning searched result in "Search box" in "search.php" file. -->

       <?php echo $Result['Name']; ?>

   </li></a>

   <!-- Below php code is just for closing parenthesis. Don't be confused. -->

   <?php

}}


?>

</ul>

4. script.js

//Getting value from "ajax.php".

function fill(Value) {

   //Assigning value to "search" div in "search.php" file.

   $('#search').val(Value);

   //Hiding "display" div in "search.php" file.

   $('#display').hide();

}

$(document).ready(function() {

   //On pressing a key on "Search box" in "search.php" file. This function will be called.

   $("#search").keyup(function() {

       //Assigning search box value to javascript variable named as "name".

       var name = $('#search').val();

       //Validating, if "name" is empty.

       if (name == "") {

           //Assigning empty value to "display" div in "search.php" file.

           $("#display").html("");

       }

       //If name is not empty.

       else {

           //AJAX is called.

           $.ajax({

               //AJAX type is "Post".

               type: "POST",

               //Data will be sent to "ajax.php".

               url: "ajax.php",

               //Data, that will be sent to "ajax.php".

               data: {

                   //Assigning value of "name" into "search" variable.

                   search: name

               },

               //If result found, this funtion will be called.

               success: function(html) {

                   //Assigning result to "display" div in "search.php" file.

                   $("#display").html(html).show();

               }

           });

       }

   });

});

5. style.css

a:hover {

   cursor: pointer;

   background-color: yellow;

}

Thanks.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.474527 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO