Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added the infinite scroll handling (append_data with items' actions) and scroll trigger handling upon dropdown is hidden (scroll_enabled) #351

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added the infinite scroll handling (append_data with items' actions) and scroll trigger handling upon dropdown is hidden (scroll_enabled) #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
baf03b8
Added the infinite scroll handling
nosoccomtothom Jun 5, 2018
622e2db
Fied the items' actions (mouseover, etc) as well as scroll protection…
nosoccomtothom Jun 5, 2018
1ade2af
Force no scroll when hidding the drodown
nosoccomtothom Jun 5, 2018
84129b1
Fix on data appending and managing scroll trigger
nosoccomtothom Jun 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions demo/example_scroll.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EasyAutocomplete categories</title>
<link href="../dist/easy-autocomplete.min.css" rel="stylesheet" type="text/css">
<link href="../dist/easy-autocomplete.themes.min.css" rel="stylesheet" type="text/css">
<link href='//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,600,600italic&amp;subset=latin,cyrillic-ext,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="../lib/jquery-1.11.2.min.js"></script>
<script>
//ESC
//Infinite scroll
//Global variables
var to_append = false; //Appending content
var global_list = []; //List elements to append
var delta_counter = 0; //Defining the offset for further queries
var scroll_enabled = true; //Managing the scrolling behaviour
var ajax_url = ''; //URL to fetch via AJAX
var delta = 25; //Amount of records to retrieve
var num_records = 0; //Amount of recrords retrieved
var offset_rows; //To make it global
var loaded_results_num;

function printObject(o) {
var out = '';
for (var p in o) {


out += p + ': ' + JSON.stringify(o[p],null,4) + '\n';
}
console.log(out);
}

function initVars(){
delta_counter = 0; //Reseting for new string search
offset_rows = 0;
loaded_results_num = 0;
}

jQuery(function($) {
$('#eac-container-buscador').on('scroll', function() {
//console.log('jQuery scroll_enable: ', scroll_enabled);
//console.log('jQuery to_append: ', to_append);
if(scroll_enabled === true){
console.log('Scroll detected!');
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
to_append = true; //Appending to the existing list
//Call query to fetch data and parse it as <li>
console.log('Inside scrolling, the offset is' + offset_rows);
offset_rows = delta*delta_counter + delta;
console.log('Inside scrolling, the offset is' + offset_rows);

delta_counter++;

ajax_url = $SCRIPT_ROOT + '_get_autocomplete?word=' + $('#buscador').val() + '&offset=' + offset_rows;

$("#buscador").easyAutocomplete(options);
console.log("Launching from scroll");
$('#buscador').keyup();
}}
})
});

</script>
<script src="../dist/jquery.easy-autocomplete.js" type="text/javascript" ></script>
</head>
<body>

<h1>EasyAutocomplete - categories infinite scroll</h1>

<input id="buscador" class="form-control" name="search_words" placeholder="¿Qué quieres buscar?" type="text">
</div>
<script>
$("#buscador").easyAutocomplete(options);

</script>

</body>

</html>
Loading