时间戳

首页 > 解决方案 > Onkeyup/KeyDown 与 Loadmore onPage 滚动的结果

javascript - Onkeyup/KeyDown 与 Loadmore onPage 滚动的结果

问题描述

我正在 onkeyup 搜索项目。Onkeyup 搜索结果部分工作正常，但我想将 onkeyup 搜索的结果作为加载更多页面滚动。

我也有页面滚动的代码，但它不起作用。

我注意到它没有传递页码。

或者有没有可能将keyup和loadmore代码混合在一起？

任何帮助将不胜感激。谢谢

索引.php

<form name="keyup">
    <input value="" type="text" id="book" >
</form>

<div id="comboB" class="comboB products-container" style="z-index: -999999999999999;">
</div>

<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>

<script>
$('#book').on('keyup', function() {
    $('.comboB').load('search.php ', {action: 'onkeyup',  textboxSearch: $(this).val()
},
{action: 'onkeydown',  textboxSearch: $(this).val()}, function(response) {
        console.log('Response of sample: ' + response + ' if you need');
});

});
</script>

<script type="text/javascript">
$(window).scroll(function() {
    if($(window).scrollTop() == ($(document).height() - $(window).height())) {
        var total_pages = parseInt($("#total_pages").val());
        var page = parseInt($("#page").val())+1;
        if(page <= total_pages) {
        load_more_data(page, total_pages);
        } 
    }
});

function load_more_data(page, total_pages) {
$("#total_pages, #page").remove(); 
$.ajax({
url: 'search.php',
type: "POST",
data: {page: page},
beforeSend: function(){
    $(".loader").show();
},
complete: function(){
$('.loader').hide();
    if(page == total_pages) {
    $(".loader").html('<hr style="border: 2px black solid;"><h2><i class="glyphicon glyphicon-remove-circle" style="color: red;"></i> Total Results ( <font color="red">' + <?php echo $ttrows; // Category ID ?> + '</font> ) - No More Results <i class="glyphicon glyphicon-remove-circle" style="color: red;"></i></h2><hr style="border: 2px black solid;">').show();
    }
},
success: function(data){
    $(".comboB").append(data);
},
error: function(){
$(".loader").html("No data found!");
}
});
}
</script>

示例.php

<?php
include('inc/db.php');

$name = $_POST['textboxSearch'];

$limit = 12;
if(isset($_POST['page']) && $_POST['page'] != "") {
    $page = mysqli_real_escape_string($dba, $_POST['page']);
    $offset = $limit * ($page-1);
} else {
    $page = 1;
    $offset = 0;
}

$mcats  =   "
SELECT * FROM items where ename like '".$name."%'
limit $offset, $limit
";

$mcattr =   "
select count(*) as total_rows from items where ename like '".$name."%'
";

$res = mysqli_fetch_object(mysqli_query($dba, $mcattr));
$total_pages = ceil($res->total_rows/$limit);

$rests = mysqli_query($dba, $mcats);
if(mysqli_num_rows($rests) > 0) {

$results = "";
$results .= '<input type="hidden" name="total_pages" id="total_pages" value="' . $total_pages . '">';
$results .= '<input type="hidden" name="page" id="page" value="' . $page . '">';

$mcat = $dba->query($mcats);
while ($mcatt = $mcat->fetch_assoc()){

    $id =   $mcatt['id'];
    $ename= $mcatt['ename'];
    $aname= $mcatt['aname'];
    $file=  $mcatt['filename']; 
?>
<li class="product-list-item col-md-4 col-xs-6" style="z-index: 3;">
<div class="product-entry">
<div class="product-thumbnail" oncontextmenu="return false">
<center>
<img draggable="false" (dragstart)="false;" style="box-shadow: 2px 2px 3px #999999;" 
class=" unselectable retina" src="images/items/<?php echo $file; ?>" alt="food">
</div>

<div class="product-content" style="box-shadow: 2px 2px 3px #999999;">
<h4 class="product-name"><?php echo $ename; ?></h4>

<ul class="product-hover-wrap">
<li class="product-link" style="width: 100%; box-shadow: 2px 2px 3px #999999;">
<a href="singleitem/<?php echo $id; ?>/itemv/">VIEW</a>
</li>
</ul>

</div>
</div>
 </li>
<?php
}
echo $results;  
}
?>

标签： javascriptphpjquery

解决方案

您的问题出在您的 PHP 中，您尝试获取参数“textboxSearch”，但您没有在 Ajax 调用中发送它。您在 Ajax 调用中的数据应如下所示：

data: {page: page,
       textboxSearch: $("#book").val()},

完整的代码应该是这样的。

索引.php

<?php

echo <<<HTML
<form name="keyup">
    <input value="" type="text" id="book" >
</form>

<div id="comboB" class="comboB products-container" style="z-index: -999999999999999;">
</div>

<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>

<script>
$('#book').on('keyup', function() {
    $('.comboB').load('search.php ', {action: 'onkeyup',  textboxSearch: $(this).val()
},
{action: 'onkeydown',  textboxSearch: $(this).val()}, function(response) {
        console.log('Response of sample: ' + response + ' if you need');
});

});
</script>

<script type="text/javascript">
$(window).scroll(function() {
    if($(window).scrollTop() == ($(document).height() - $(window).height())) {
        var total_pages = parseInt($("#total_pages").val());
        var page = parseInt($("#page").val())+1;
        if(page <= total_pages) {
        load_more_data(page, total_pages);
        } 
    }
});

function load_more_data(page, total_pages) {
$("#total_pages, #page").remove(); 
$.ajax({
url: 'search.php',
type: "POST",
data: {page: page,
       textboxSearch: $("#book").val()},
beforeSend: function(){
    $(".loader").show();
},
complete: function(){
$('.loader').hide();
    if(page == total_pages) {
    $(".loader").html('<hr style="border: 2px black solid;"><h2><i class="glyphicon glyphicon-remove-circle" style="color: red;"></i> Total Results ( <font color="red">' + <?php echo $ttrows; // Category ID ?> + '</font> ) - No More Results <i class="glyphicon glyphicon-remove-circle" style="color: red;"></i></h2><hr style="border: 2px black solid;">').show();
    }
},
success: function(data){
    $(".comboB").append(data);
},
error: function(){
$(".loader").html("No data found!");
}
});
}
</script>
HTML;
?>

此外，您的“sample.php”应命名为“search.php”，因为在您的 ajax 调用中，您的 url 是url: 'search.php'.

我希望能帮助你。

推荐阅读