以下是一个简单的PHP动态搜索框代码示例:
<!DOCTYPE html>
<html>
<head>
<title>动态搜索框</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#search_results {
position: absolute;
width: 200px;
background-color: #f9f9f9;
border: 1px solid #ccc;
display: none;
}
.result {
padding: 5px;
cursor: pointer;
}
.result:hover {
background-color: #e9e9e9;
}
</style>
</head>
<body>
<h1>动态搜索框</h1>
<input type="text" id="search_input" placeholder="请输入关键字">
<div id="search_results"></div>
<script>
$(document).ready(function(){
$('#search_input').keyup(function(){
var query = $(this).val();
if(query != ''){
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data){
$('#search_results').html(data);
$('#search_results').css('display', 'block');
}
});
}
});
$(document).on('click', '.result', function(){
$('#search_input').val($(this).text());
$('#search_results').css('display', 'none');
});
$(document).on('click', function(){
$('#search_results').css('display', 'none');
});
});
</script>
</body>
</html>
上述代码中,我们使用了jQuery来处理搜索框的事件。当用户在搜索框中输入关键字时,会触发keyup事件,然后使用AJAX向服务器发送搜索请求,并将搜索结果显示在一个下拉列表中。
在上述代码中,我们使用了一个名为search.php
的文件来处理搜索请求,并返回搜索结果。下面是一个简单的search.php
文件示例:
<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydatabase";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 处理搜索请求
if(isset($_POST["query"])){
$query = $_POST["query"];
// 查询数据库中匹配的结果
$sql = "SELECT * FROM products WHERE name LIKE '%".$query."%'";
$result = $conn->query($sql);
// 显示搜索结果
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<div class='result'>".$row["name"]."</div>";
}
} else {
echo "无结果";
}
}
$conn->close();
?>
上述代码中,我们首先连接到数据库,然后根据用户输入的关键字查询匹配的结果,并将结果以HTML的形式返回给前端页面。
请注意,上述代码只是一个简单示例,实际应用中可能需要根据具体需求进行修改和优化。
下一篇:php 获取子类名
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站