Question

我可以在页面上显示记录，点击搜索按钮后搜索也可以。现在我的问题是如何在按下的键上显示记录。

例如 - 如果任何用户在搜索文本字段中键入任何记录将在屏幕上搜索并显示的内容，则我在同一页面上有100条记录。

你能帮助我吗？

HTML

<script>
 $(function () {
 $('#valueToSearch').on('keyup',function(){
  //Your ajax call will go Here
  $.ajax({
    url:senddata.php, // separate file for search
    data : {
      q : $('#valueToSearch').val().trim()
    },
    method:'POST',
    dataType:'json',
    success:function(data){
        $('#fetch_record').html(data);
    },
    error:function(data){
     alert("something has gone wrong");
    }
  });
});
});
    </script>
    <form action="" method="post">
        <input type="text" name="valueToSearch" placeholder="Value To Search"><br><br>
        <input type="submit" name="search" value="search"><br><br>

        <table>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>

  <!-- populate table from mysql database -->
            <?php while($row = mysqli_fetch_array($search_result)):?>
            <tr>
                <td><?php echo $row['id'];?></td>
                <td><?php echo $row['firstname'];?></td>
                <td><?php echo $row['lastname'];?></td>
                <td><?php echo $row['email'];?></td>
            </tr>
            <?php endwhile;?>
        </table>
    </form>

senddata.php

    if(isset($_POST['q']) && $_POST['q'] !=''){
$valueToSearch = $_POST['q'];

// your sql query for Searching result
$query = "SELECT * FROM `test` WHERE CONCAT(`id`, `firstname`, `lastname`, `email`) LIKE '%".$valueToSearch."%'";
$result = $conn->query($query);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $id=$row["id"];
        $fn=$row["firstname"];
        $ln=$row["lastname"];
        $email=$row["email"];
    }
}
return json_encode($id, $fn, $ln, $email);
}

Answer 1

为此你必须解决Ajax，并且会有很多变化，我希望你清楚Javascript的基本概念

下面的代码将为您提供一个开端。

$('#searchboxID').on('keyup',function(){
  //Your ajax call will go Here
  $.ajax({
    url:senddata.php, // separate file for search
    data : {
      q : $('#searchboxID').val().trim()
    },
    method:'POST',
    dataType:'json',
    success:function(data){
      // replace your data in html
    },
    error:function(data){
     alert("something has gone wrong");
    }
  });
});

IN sendata.php

if(isset($_POST['q']) && $_POST['q'] !=''){
// your sql query for Searching result
return your result in json encoded format
}

希望这会有所帮助。

Answer 2

这是检测输入更改并从输入框中获取值的方法。

＆＃13;

$("input").keyup(function(e){
  console.log($(this).val())
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

＆＃13;

@Krunal解释了如何进行ajax调用
修改您的搜索代码，以便您的搜索$_POST['valueToSearch']与ajax请求中的参数名称匹配@Krunal编写它（类似于$_POST['q']。注意 - 在执行查询之前收到SANITIZE数据
您的php脚本应使用json_encode()函数返回json编码数组。您可以简单地回显结果字符串。
在ajax调用中处理带有success属性的回显数据。从简单的console.log()开始，然后继续前进到第6步。
遍历收到的数组并将创建的html元素追加到父容器中。 snippet

Answer 3

最后，我找到了使用Ajax的解决方案，并且我使用了准备好的语句。首先，我在索引页面中显示所有记录，如果用户在搜索中输入任何类型，将Ajax抛出到进程页面并返回索引页面。

请检查我的代码并帮助我更安全，更轻松地减少代码行数。

<强>的index.php

    <input type="text" name="search" >
    <div id="table-container">
    <?php 
    $query="SELECT id, firstname, lastname, email, message, location FROM test";
    if ($stmt = $conn->prepare($query)) {
        $stmt->execute();
        $stmt->bind_result($id, $firstname, $lastname, $email, $message, $location);
        echo '<table border="1"';
        echo '<tr>
            <th>Id</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email.</th>
          <th>Message</th>
          <th>location</th>
        </tr>';

        while ($stmt->fetch()) {
          echo'<tr>
            <td><input type="checkbox" onclick="" name="checkbox[]" value='.$id.'></td>
               <td>'.$firstname.'</td>
               <td>'.$lastname.'</td>
               <td>'.$email.'</td>
               <td>'.$message.'</td>
               <td>'.$location.'</td>
          </tr>
               ';
        }
            echo '</table>';
        $stmt->close();
    }
    $conn->close();
    ?>
    </table>

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

    $(document).ready(function()
                     {
        $("input[name='search']").on('keyup',function()
           {
            var keyword = $(this).val();
            $.ajax(
            {
                url:'process.php',
                type:'POST',
                data:'request='+keyword,
                success:function(data)
                {
                    $("#table-container").html(data);
                    //alert(data);
                },
            });
        });
    });
</script>

<强> Process.php

$request=$_POST['request'];

$query="SELECT id, firstname, lastname, email, message, location FROM `test` WHERE firstname LIKE '%" .$request. "%' OR lastname LIKE '%".$request  ."%' OR email LIKE '%" .$request ."%' OR location LIKE '%" .$request ."%'";
if ($stmt = $conn->prepare($query)) {
    $stmt->execute();
    $stmt->bind_result($id, $firstname, $lastname, $email, $message, $location);

    echo '<table border="1"';
    echo '<tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email.</th>
      <th>Message</th>
      <th>location</th>
    </tr>';

    while ($stmt->fetch()) {
      echo'<tr>
          <td><input type="checkbox" onclick="" name="checkbox[]" value='.$id.'></td>
           <td>'.$firstname.'</td>
           <td>'.$lastname.'</td>
           <td>'.$email.'</td>
           <td>'.$message.'</td>
           <td>'.$location.'</td>
      </tr>
           ';
    }
    $stmt->close();
}
$conn->close();

如何使用ajax或php显示按下键的记录？

3 个答案: