Home PHP AJAX Live Search
Reply: 0

PHP AJAX Live Search

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;


     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.



1. db.php


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

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


2. search.php

<!DOCTYPE html>
   <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">


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

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

3. ajax.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 '



   //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']; ?>")'>


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

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


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





4. script.js

//Getting value from "ajax.php".

function fill(Value) {

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


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



$(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.



       //If name is not empty.

       else {

           //AJAX is called.


               //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.







5. style.css

a:hover {

   cursor: pointer;

   background-color: yellow;



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