Ajax Based search PHP

Question

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;
}


?>

Define "not working". Look at your browser's developer tools. Look at the JavaScript console. Does it report any errors? Look at the Net tab. Is the request being made? Does it get a response? Do they contain the data you expect? — Quentin
– Quentin, Commented Feb 9, 2015 at 7:25

Shakila Sasikaran · Accepted Answer · 2015-02-09 08:55:25Z

1

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

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

answered Feb 9, 2015 at 8:55

Shakila Sasikaran

1481 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SagarPPanchal · Accepted Answer · 2015-02-09 11:21:08Z

0

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);
      }
    });

edited Feb 9, 2015 at 11:21

answered Feb 9, 2015 at 7:30

SagarPPanchal

10.2k6 gold badges36 silver badges66 bronze badges

Comments

Shakila Sasikaran · Accepted Answer · 2015-02-11 05:27:13Z

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;
?>

parveen · Accepted Answer · 2015-02-11 05:41:06Z

0

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
      }
    });

answered Feb 11, 2015 at 5:41

parveen

5773 silver badges13 bronze badges

Collectives™ on Stack Overflow

Ajax Based search PHP

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related