Jason
Jason

Reputation: 33

Search data from array in php

I want to get data from php array and show it on same page. how to import data from php array by using search box. This code not working properly. What is th error of this code?

foodstore.js

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
    var xmlHttp;

    if(window.ActiveXObject){
        try{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){
              xmlHttp = false;
        }
    } else{
        try{
            xmlHttp = new XMLHttpRequest();
        }catch(e){
              xmlHttp = false;
        }
    }
    if(!xmlHttp)
        alert("cant create that object hoss!");
    else
        return xmlHttp;

}

function process(){
      if(xmlHttp.readyState==0|| xmlHttp.readyState==4){
            food = encodeURIComponent(document.getElementById("userInput").value);
            xmlHttp.open("GET","foodstore.php?food="+food,true);
            xmlHttp.onreadystatechange = handleServerResponse;
            xmlHttp.send(null);
      }else{
         setTimeout('process()',1000);

      }
}

function handleServerResponse(){
    if(xmlHttp.readyState==4){
         if(xmlHttp.status==200){
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById("underInput").innerHTML ='<span style="color:blue">'+message+'</span>';
            setTimeout('process',1000);
         }else{
            alert('Something went wrong!');
         }
    }

 }

foodstore.php

<?php
   header('Content-Type: text/xml'); 
   echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

echo '<response>';
   $food = $_GET['food'];
   $foodArray = array('tuna','bacon','beef','loaf','ham');
   if(in_array($food,$foodArray))
      echo 'We do have '.$food'!';
    elseif($food =='')
      echo 'Enter a food you want to buy';
    else
       echo 'Sorry we don't sell it '.$food'!';       

echo '</response>';

?>

Index.html

<html><head>
<script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
<h3>The foods  </h3>
Order your foods:
<input type="text" id="Userinput"></input>
<div id="underInput"></div>
</body>
</html>

How to show array data by searching from search box

Upvotes: 2

Views: 232

Answers (1)

KAS
KAS

Reputation: 820

I have changed the code using jquery its simple . You can try it.

index.html

    <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(function()
            {
                $("#Userinput").keyup(function()
                {
                    process();
                });
                $("#Userinput").keydown(function()
                {
                    process();
                });

                $("#Userinput").focus(function()
                {
                    process();
                });
                $("#Userinput").change(function()
                {
                    process();
                });
            });

            function process() {
                var input_food = $("#Userinput").val();
                $.ajax({
                    type: "GET",
                    url: "foodstore.php",
                    data: {food: input_food},
                    success: function(message)
                    {
                        $("#underInput").html('<span style="color:blue">' + message + '</span>');
                    },
                    error: function()
                    {
                        $("#underInput").html('<span style="color:red">Some error occured</span>');
                    }
                });
            }
        </script>
    </head>
    <body >
        <h3>The foods  </h3>
        Order your foods:
        <input type="text" id="Userinput" ></input>
        <div id="underInput"></div>
    </body>
</html>

foodstore.php

    <?php

    if (!empty($_GET['food']))
    {
        $food = $_GET['food'];
        $foodArray = array('tuna', 'bacon', 'beef', 'loaf', 'ham');
        if (in_array($food, $foodArray))
            echo "We do have " . $food . "!";
        elseif ($food == '')
            echo "Enter a food you want to buy";
        else
            echo "Sorry we don't sell it " . $food . "!";
    }
    else
    {
        echo "Enter a food you want to buy";
    }
?>

I think its simple if you know jquery .And there was a simple error in php you did't escape the extra single quotes in (don't) so I used double quotes for echo statements. Copy paste and tell if this is it what you want or not.Got any doubt ask.

Upvotes: 1

Related Questions