weixin_33719619 2016-12-21 11:56 采纳率: 0%
浏览 16

Ajax优化搜索

I have a table for a sports day where there are 4 columns name, house, event, result. I have no problem creating and displaying the database but i want to be able to search in a bar and to use AJAX to automatically search all 4 columns for whats in the search bar. I am using PHPmyadmin to store the database with mySQLI. i am able to display the database on the page that i want. I also want when the page starts for the whole table to be displayed and then when you start typing it just removes any items that do not match the search. I have never used Ajax before so sorry for my bad code as it is all from w3schools site. the DB is called sports_day and the table is called full_results. here is my current code.

    <script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","results_query.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

<form>
search for pupil
<input type="text" size="30" name="user" onkeyup="showUser(this.value)">
<div id="livesearch"></div>
<br>
</form>

<div class="col-sm-12">

<div id="txtHint"><b> pupil's info will be listed here</b></div>

</div>

and on a page called results_query.php is this code

<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect("localhost","root","","sports_day");
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"sports_day");
$sql="SELECT * FROM full_results WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo '<tr>';
    echo '<th>NAME</th>';
    echo '<th>HOUSE</th>';
    echo '<th>EVENT</th>';
    echo '<th>RESULT</th>';
echo ' </tr>';
while($row = mysqli_fetch_array($result)) {
  echo "<tr>";
  echo "<td>" . $row['NAME'] . "</td>";
  echo "<td>" . $row['HOUSE'] . "</td>";
  echo "<td>" . $row['EVENT'] . "</td>";
  echo "<td>" . $row['RESULT'] . "</td>";
  echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>

at the moment what happens is none of the table is shown and when i type anything in the search box the whole table appears along with in plain text at the bottom the title and all the contents of the table in a long line.

any suggestion to get my code to work would be greatly appreciated!

thanks!

  • 写回答

2条回答 默认 最新

  • weixin_33716557 2016-12-21 15:39
    关注

    If you use your 'results_query.php' file only for getting the data from database, then you don't need to create a <body> tag. If you use only PHP then you can easily skip any plane HTML. That's just a digression :)

    But to the point. You can change the way you return your data from database. I think, instead of doing a lot of echo's it is better to add result to the variable and echoing the variable at the end.

        $data = '<tr>' . '<th>NAME</th>' . '<th>HOUSE</th>' . '<th>EVENT</th>' . '<th>RESULT</th>' . '</tr>';
    
        while($row = mysqli_fetch_array($result)) {
          $data .= '<tr>';
          $data .= '<td>' . $row['NAME'] . '</td>';
          $data .= '<td>' . $row['HOUSE'] . '</td>';
          $data .= '<td>' . $row['EVENT'] . '</td>';
          $data .= '<td>' . $row['RESULT'] . '</td>';
          $data .= '</tr>';
        }
    
        $data .= '</table>';
        mysqli_close($con);
    
        echo $data;
    

    See if this changes something.

    What about showing entire table after the page's loaded, you will have to change both PHP and JavaScript code a little bit.

    You can change your JS so it gets everything from your full_results table after page is loaded. There are several ways to do this and you can read about them here:

    pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

    The easiest way would be to do this this way:

        <script>
            function showUser(str) {
                var url;
                var xmlhttp;
    
                if (str == "") { //if empty string - get all data
                  url = "results_query.php";
                } else { //get particular data otherwise
                  url = "results_query.php?q="+str;
                }
    
                if (window.XMLHttpRequest) {
                   // code for IE7+, Firefox, Chrome, Opera, Safari
                   xmlhttp = new XMLHttpRequest();
                } else {
                  // code for IE6, IE5
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange = function() {
                  if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                  }
                }
    
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }
        </script>
    
            <form>
            search for pupil
            <input type="text" size="30" name="user" onkeyup="showUser(this.value)">
            <div id="livesearch"></div>
            <br>
            </form>
    
            <div class="col-sm-12">
    
            <div id="txtHint"><b> pupil's info will be listed here</b></div>
    
            </div>
    
            <script>
               //calling your function with empty string because we want to get all data
               showUser("");
            </script>
    

    and in the PHP file you can do something like this:

    <?php
    $q = 0;
    //check if 'q' parameter was passed
    if(isset($_GET['q'])) {
      $q = intval($_GET['q']);
    }
    
    $con = mysqli_connect("localhost","root","","sports_day");
    if (!$con) {
        die('Could not connect: ' . mysqli_error($con));
    }
    
    mysqli_select_db($con,"sports_day");
    $sql = ($q) ? "SELECT * FROM full_results WHERE id = '".$q."'" : "SELECT * FROM full_results";
    

    Now your JavaScript function will be called after loading your page. It will call your PHP script with AJAX and this script should return all data from your table.

    In line ($q) ? "SELECT * FROM full_results WHERE id = '".$q."'" : "SELECT * FROM full_results"; there is a simple check if $q is different from 0. Our variable will be set to 0 if no argument was passed, so whenever $q is equal to '0', we just want to get all the data from full_results and specific data otherwise.

    I also added var xmlhttp because it is only local variable. You can read more about that in here:

    https://stackoverflow.com/a/1471738/7301294

    I hope it will help you. Let me know if you have any other problems and never be afraid to ask. Good luck!

    评论

报告相同问题?