AJAX /实时搜索问题

Question

Here are my files:

Backend Search PHP File:

<?php
require "../sinfo.php";

function chk_phone($orig) {
    return preg_replace("/[^0-9]/","",$orig);
}

$s = $_POST["s"];
$sql = "SELECT * FROM requests WHERE id LIKE '%" . $s . "%' OR " .
"lower(firstname) LIKE '%" . strtolower($s) . "%' OR " .
"lower(lastname) LIKE '%" . strtolower($s) . "%' OR " .
"dayphone LIKE '%" . strtolower($s) . "%' ORDER BY id ASC";
$result = $conn->query($sql);
$valid = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        if ($row["status"] == "Complete" && date_compare($row["timestamp"]) < 37) {
            $valid[] = $row;
        }
    }
}
if (count($valid) > 0) {
    echo "<ul>
";
    foreach ($valid as $row) {
        echo "<li onclick=\"javascript: autofill('" . $row["id"] . "', '" . 
        $row["firstname"] . "', '" . 
        $row["lastname"] . "', '" . 
        chk_phone($row["dayphone"]) . "', '" . 
        chk_phone($row["evephone"]) . "', '" . 
        $row["email"] . "', '" . 
        $row["make"] . "', '" . 
        $row["os"] . "', '" . 
        htmlspecialchars($row["issue"]) . "', '" . 
        $row["password1"] . "', '" . 
        $row["password2"] . 
        "');\">" . $row["id"] . " - " . $row["firstname"]. " " . $row["lastname"] . "</li>
";
    }
    echo "</ul>
";
} else {
    echo "-- No Results Found --";
}?>

Here is the javascript file:

    function upsearch(content) {
       var xmlhttp;
                  try{
                     // Opera 8.0+, Firefox, Safari
                     xmlhttp = new XMLHttpRequest();
                  }

                  catch (e){
                     // Internet Explorer Browsers
                     try{
                        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                     }

                     catch (e) {
                        try{
                           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }

                        catch (e){
                           alert("Something went wrong.!
Error: 
" + e);
                           return false;
                        }
                     }
                  }

       xmlhttp.onreadystatechange = function() {
       //if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           document.getElementById("results").innerHTML = xmlhttp.responseText;
           //}
       };
       var params = "s=" + content;
       xmlhttp.open("POST", "ajax/requestsearch.php", true);
       xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       xmlhttp.send(params);
    }
function autofill(rid, fname, lname, dphone, ephone, email, make, os, issue, password1, password2) {
    document.getElementById("searchrid").value = rid;
    document.getElementById("searchrid").disabled = true;
    document.getElementById("custinfo").style.display = "block";

    document.getElementById("firstname").value = fname;
    document.getElementById("firstname").disabled = true;
    document.getElementById("lastname").value = lname;
    document.getElementById("lastname").disabled = true;
    document.getElementById("dayphone").value = dphone;
    document.getElementById("evephone").value = ephone;
    document.getElementById("email").value = email;

    document.getElementById("equipinfo").style.display = "block";
    document.getElementById("make").value = make;
    document.getElementById("make").disabled = true;
    document.getElementById("password1").value = password1;
    document.getElementById("password2").value = password2;
    document.getElementById("originalissue").style.display = "block";
    document.getElementById("originalissue").innerHTML = issue;
    document.getElementById("os").value = os;
}

On the main PHP page that calls the backend page, I get all the results as expected. It displays as I want and everything. My problem is that all the lines it returns, some of them don't perform the javascript "autofill" function, while others do. It's always the same ones, so it doesn't matter if the search is done in different ways. The only thing that I could think of that could cause problems was the "issue" field from my database can have html elements, but I fix that with the htmlspecialchars() function. Before I switched it to a POST method, I was using the GET method and I would pull that same page up with the same search results and look at the code, and it would all be correct, even those ones that would not perform the function. I switched it to the POST method to see if it would make a difference, but its the exact same problem. This same problem occurs in Chrome and IE. What am I doing wrong? Or what should I do differently.

Answer 1

I would suggest You to use jQuery.

Just use simple ajax request like:

$.ajax({
type: 'POST',
url: 'ajax/requestsearch.php',       
data: 'q='+query,              
success: function(data){
    var r = $.parseJSON(data);                         
    autofill(r[0].lastname,r[0].firstname, r[0].phone, etc);
}
});

and requestsearch.php

    $q = $_POST['q'];
    $sql="SELECT * FROM DataBase WHERE firstname LIKE '%$q%' ORDER BY firstname asc";
         $result = $conn->query($sql);             
         while($row = $result->fetch_assoc()){
              $data[] = $row;
         }
         echo json_encode($data);