分页中的PHP Ajax实时搜索
我正在尝试在分页中的PHP Ajax实时搜索,php,ajax,pagination,livesearch,Php,Ajax,Pagination,Livesearch,我正在尝试在分页中实现实时搜索。我能够插入静态搜索按钮,点击回车键后工作。我想实现实时搜索按钮,而不是这个。当我尝试使用ajax时,我无法处理,它是一团糟 以下是我的分页和搜索代码。如何使用实时搜索而不是静态搜索?我是阿贾克斯新手。或者请提供一个教程链接,以在分页中创建实时搜索 <?php $search_keyword = ''; if(!empty($_POST['search']['keyword'])) { $search_keyword =
分页
中实现实时搜索
。我能够插入静态搜索按钮,点击回车键后工作。我想实现实时搜索按钮,而不是这个。当我尝试使用ajax时,我无法处理,它是一团糟
以下是我的分页和搜索代码。如何使用实时搜索而不是静态搜索?我是阿贾克斯新手。或者请提供一个教程链接,以在分页中创建实时搜索
<?php
$search_keyword = '';
if(!empty($_POST['search']['keyword'])) {
$search_keyword = $_POST['search']['keyword'];
}
$sql = 'SELECT * FROM posts WHERE post_title LIKE :keyword OR description LIKE :keyword OR post_at LIKE :keyword ORDER BY id DESC ';
/* Pagination Code starts */
$per_page_html = '';
$page = 1;
$start=0;
if(!empty($_POST["page"])) {
$page = $_POST["page"];
$start=($page-1) * ROW_PER_PAGE;
}
$limit=" limit " . $start . "," . ROW_PER_PAGE;
$pagination_statement = $pdo_conn->prepare($sql);
$pagination_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pagination_statement->execute();
$row_count = $pagination_statement->rowCount();
if(!empty($row_count)){
$per_page_html .= "<div style='text-align:center;margin:20px 0px;'>";
$page_count=ceil($row_count/ROW_PER_PAGE);
if($page_count>1) {
for($i=1;$i<=$page_count;$i++){
if($i==$page){
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page current" />';
} else {
$per_page_html .= '<input type="submit" name="page" value="' . $i . '" class="btn-page" />';
}
}
}
$per_page_html .= "</div>";
}
$query = $sql.$limit;
$pdo_statement = $pdo_conn->prepare($query);
$pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
$pdo_statement->execute();
$result = $pdo_statement->fetchAll();
?>
<form name='frmSearch' action='' method='post'>
<div style='text-align:right;margin:20px 0px;'><input type='text' name='search[keyword]' value="<?php echo $search_keyword; ?>" id='keyword' maxlength='25'></div>
<table class='tbl-qa'>
<thead>
<tr>
<th class='table-header' width='20%'>Title</th>
<th class='table-header' width='40%'>Description</th>
<th class='table-header' width='20%'>Date</th>
</tr>
</thead>
<tbody id='table-body'>
<?php
if(!empty($result)) {
foreach($result as $row) {
?>
<tr class='table-row'>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['post_at']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<?php echo $per_page_html; ?>
</form>
这是我在搜索
实时搜索分页后在谷歌搜索结果中得到的第一件事
:
注意:此方法使用的是
jQuery
,请注意
如前所述,您只需要一个搜索框:
您的JS代码如下所示:
$(document).ready(function() {
change_page('0');
});
function change_page(page_id) {
//To get the field value
var search_val = $("#search_box").val();
$(".flash").show();
$(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
var dataString = 'page_id=' + page_id + '&search=' + search_val;
$.ajax({
type: "POST",
url: "paging.php",
data: dataString,
cache: false,
success: function(result) {
$(".flash").hide();
$("#page_data").html(result);
}
});
}
$(文档).ready(函数(){
更改页面(“0”);
});
功能更改页面(页面id){
//获取字段值的步骤
var search_val=$(“#search_box”).val();
$(“.flash”).show();
$(“.flash”).fadeIn(400.html('load');
var dataString='page_id='+page_id+'&search='+search_val;
$.ajax({
类型:“POST”,
url:“paging.php”,
数据:dataString,
cache:false,
成功:功能(结果){
$(“.flash”).hide();
$(“#page_data”).html(结果);
}
});
}
您现在需要做的就是将PHP代码分离到一个单独的
.PHP
文件中,并在$.ajaxURL
参数中引用其中的数据。感谢Man解决了这个问题。发帖前一定要先搜索,有时候你会发现比你想象的更快的东西