1. Siapkan Jquery
2. Buat File Index.php dengan Code Seperti Ini:
<html>
<head>
<title>
Tes</title>
<style>
body{ color:#fff; background:#433443; } .content{ height:300px; background:#455476; border-bottom:1px solid #9898a8; } </style>
<script src="jquery.js">
</script>
<script src="pagingscroll.js">
</script>
</head>
<body>
<div id="container">
<section id="wrap">
<article>
<input type="text" id="input" />
</article>
<article>
<div class="content">
Konten 1 </div>
<div class="content">
Konten 2 </div>
<div class="content">
Konten 3 </div>
<div class="content">
Konten 4 </div>
</article>
</section>
</div>
<script>
$("document").ready(function(){
$("#input").keyup(function(){
var $clone = $(".content:eq(0)").clone(); $(".content").remove();
$('#container').scrollPagination({
nop : 7, // The number of posts per scroll to be loaded
offset : 4, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true, // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
clone : $clone
});
});
$(".content").live("click",function(){ console.log("Clicked"); }); }); </script>
</body>
</html>
3. File index2.php nya seperti ini:
<?php
$data = array ( 0=>array("nama"=>"Wahyu Kodar"),
1=>array("nama"=>"Amrizal"),
2=>array("nama"=>"Jon"),
3=>array("nama"=>"Arif"),
4=>array("nama"=>"Miftah"),
5=>array("nama"=>"Ucup"),
6=>array("nama"=>"Dika"),
7=>array("nama"=>"Monic"),
8=>array("nama"=>"Fajar")
);
echo json_encode($data);
?>
4. Fungsi Javascript AutoComplete dan Paging OnScrollnya:
(function($) {
$.fn.scrollPagination = function(options) {
var settings = { // default setting
nop : 2,
offset : 0,
error : 'No More Posts!',
delay : 500,
clone : ''
}
if(options) {
$.extend(settings,
options);
}
// For each so that we keep chainability.
return this.each(function() {
// Some variables
$this = $(this);
$settings = settings;
var offset = $settings.offset+$settings.nop;
var start = $settings.nop;
var busy = false;
var finish = false;
var $clone = $settings.clone;
function getData() {
$.ajax({
url:"index2.php",
success:function(result){
var data = JSON.parse(result);
if(offset>
data.length){
console.log("Impossible Load,
because data is empty");
console.log("Offset is:"+offset+" and Data size is:"+data.length);
offset = offset - $settings.nop; // return to current offset
var gapSize = data.length - offset; // get gap of size
offset = offset + gapSize;
console.log("Now Offset is:"+offset);
finish = true;
}
for(var i=start;
i<
offset;
i++){
$clone.text(data[i].nama);
$clone.appendTo("article:eq(1)");
console.log(data[i].nama);
$clone = $clone.clone();
}
start = start + $settings.offset;
offset = offset + $settings.offset;
busy = false;
}
,
error:function(result){
console.log("Err: "+result);
}
}
);
}
getData(); // Run function initially
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >
$this.height() && !busy) {
busy = true;
setTimeout(function() {
if(!finish){
getData();
}
}
,
$settings.delay);
}
}
);
}
);
}
}
)(jQuery);
0 comments:
Post a Comment