CODEWITHSUNDEEP
phpjquerymysqlajax
Bishwaroop
Bishwaroop

Reputation: 33

Ajax Based search PHP

I am trying to create an AJAX based search in PHP. The code I have written so far does not seem to be working uptil now. Any suggesstions would be of great help. Thanks in advance. Here is my code.

index.php 

<head>
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>

<input type="text" name="text" id="text" autocomplete="off" onkeyup="showHint(this.value)"/>


<div id="inner"></div>
<script type="text/javascript">

function showHint(str) {
        if(str.length == 0) {
            document.getElementById('inner').innerHTML = "search";
            return;
        }

        if(window.XMLHttpRequest) {
            xmlhttp = XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if(xmlhttpreadystate == 4 && xmlhttp.status == 200) {
                document.getElementById('inner').innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("REQUEST", "search.php?text"+str, true);
        xmlhttp.send();

    }

</script>

</body>

</html>

search.php

<?php

    $host = 'localhost';
    $user = 'root';
    $password= 'root';
    $db = 'demo';

    @$conn = mysql_connect($host, $user, $password) or die(mysql_error());
    mysql_select_db($db, $conn);

    /*if($result) {
        echo "success";
    } else { echo "fail"; }
    */



$text = $_REQUEST['text'];
$text = preg_replace('#[^a-z0-9]#i', '', $text);

$query = "SELECT * FROM users where first_name LIKE '%$text%' OR last_name LIKE '%$text%'";

$action = mysql_query($query);
$result = mysql_num_rows($action);

while($res = mysql_fetch_array($action)) {
  $output .= $res['first_name']. ' '.$res['last_name'];
  echo $output;
}


?>

Upvotes: 0

Views: 154

Answers (4)

parveen
parveen

Reputation: 577

Use this :

$.ajax({
      url: 'search.php',
      type: 'GET',
      data: 'text='+str,
      success: function(data) {
        //called when successful
        $('#inner').html(data);
      },
      error: function(e) {
        //called when there is an error
        console.log(e.message);  
    alert(e.message); // if you dont know how to check console
      }
    });

Upvotes: 0

Shakila Sasikaran
Shakila Sasikaran

Reputation: 148

I am just getting the input in search.php. Can you try these codes:

index.html:

<html>
<head>
</head>
<body>
<input type="text" name="text" id="text" autocomplete="off" onkeyup="showHint(this.value)"/>
<div id="inner"></div>
<script type="text/javascript">
function getHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function showHint(str)
{
var xmlhttp; 
if (str=="")
  {
  document.getElementById('inner').innerHTML = "search";
            return;
  }

if (window.XMLHttpRequest)
  {   
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
                document.getElementById('inner').innerHTML = xmlhttp.responseText;
    }
  }  
xmlhttp.open("GET", "search.php?str="+str, true);

xmlhttp.send();
}
</script>
</body>
</html>

search.php:

<?php
$text=$_GET["str"];
echo $text;
?>

Upvotes: 0

SagarPPanchal
SagarPPanchal

Reputation: 10111

Why you are doing this lengthy process, You can also try this jQuery ajax,

$.ajax({
      url: 'search.php',
      type: 'GET',
      data: 'text='+str,
      success: function(data) {
        //called when successful
        $('#inner').html(data);
      },
      error: function(e) {
        //called when there is an error
        console.log(e.message);
      }
    });

Upvotes: 0

Shakila Sasikaran
Shakila Sasikaran

Reputation: 148

You missed the equal sign in the script(after the text) in index.php.

xmlhttp.open("REQUEST", "search.php?text="+str, true);

Upvotes: 1

Related Questions