📜  关于用于搜索 php 的 keyup jquery(1)

📅  最后修改于: 2023-12-03 15:36:46.698000             🧑  作者: Mango

关于用于搜索 PHP 的 keyup jQuery

在 PHP 开发过程中,搜索功能是一个常见的需求。通过使用 keyup jQuery 事件,开发人员可以实现在用户输入时即时更新搜索结果的功能。本文将介绍如何使用 keyup jQuery 实现搜索 PHP。

HTML 结构

首先,我们需要在 HTML 页面中创建搜索框和搜索结果的容器。可以使用以下代码:

<form action="" method="GET">
  <input type="text" id="search-box" name="q" placeholder="Search...">
</form>

<div id="search-results"></div>

这里我们创建了一个带有 id 为 search-box 的输入框和一个带有 id 为 search-results 的搜索结果容器。

JavaScript 代码

我们可以使用以下代码实现搜索 PHP 的 keyup jQuery 功能:

$(document).ready(function() {
  $('#search-box').keyup(function() {    
    var query = $(this).val();
    if(query !== '') {    
      $.ajax({
        url: 'search.php',
        method: 'POST',
        data: {query: query},
        success: function(data) {      
          $('#search-results').html(data);
        }
      });
    } else {
      $('#search-results').html('');
    }
  });
});

在这段代码中,我们使用了 keyup 事件来检测搜索框中的变化,并使用 jQuery 的 ajax() 方法从 search.php 文件中获取数据。如果搜索框为空,则清空搜索结果容器。

PHP 代码

最后,我们需要编写 search.php 文件来执行搜索操作并返回结果。可以使用以下代码:

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'example';

$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

if(mysqli_connect_errno()) {
  die("Database connection failed: " . mysqli_connect_error());
}

$query = $_POST['query'];

$sql = "SELECT * FROM users WHERE name LIKE '%$query%'";

$result = mysqli_query($conn, $sql);

if(mysqli_num_rows($result) > 0) {
  while($row = mysqli_fetch_assoc($result)) {
    echo '<p><a href="user.php?id='.$row['id'].'">'.$row['name'].'</a></p>';
  }
} else {
  echo '<p>No results found</p>';
}

mysqli_close($conn);
?>

在这段代码中,我们首先连接到数据库并获取用户输入的查询字符串。然后,我们使用 SQL 语句在数据库中执行搜索操作,并将结果显示在 HTML 页面中。

总结

通过使用 keyup jQuery 事件和 PHP,我们可以轻松地实现实时搜索功能。在实际应用中,您可以根据需要修改此代码,并在自己的项目中使用。