I'm trying to load more data on scroll in my autocomplete textbox When the user scrolls downward it will function like pagination loading more results as needed.
Something like this.
I've been searching for quite a while and I'm having a problem finding similar problem like mine.
<div class="ui-widget">
<label for="tags">Enter Company Name: </label>
<input id="tags" class="form-control">
</div>
<script>
$( function() {
$( "#tags" ).autocomplete({
source: 'function/all_company_auto.php'
});
} );
</script>
Here is my php code.
<?php
$get_company = "SELECT DISTINCT companies.company
FROM companies
INNER JOIN target_details
ON companies.company_id = target_details.company_id
WHERE companies.company LIKE \"%$company%\"
LIMIT 100 OFFSET 10
";
if($run_company = $conn->query($get_company)){
while($row = $run_company->fetch_assoc()){
$data[] = $row['company'];
}
echo json_encode($data);
}
?>
To start, your PHP will need to be able to collect a conditional amount of results.
This might look like this:
<?php
$start = isset($_POST['o']) ? int($_POST['o']) : 0; // Offset
$count = isset($_POST['l']) ? int($_POST['l']) : 100; // Limit
$company = $conn->real_escape_string($_POST['term']); // Search Term, protected from SQL Injection
$get_company = "SELECT DISTINCT companies.company
FROM companies
INNER JOIN target_details
ON companies.company_id = target_details.company_id
WHERE companies.company LIKE \"%$company%\"
LIMIT $count OFFSET $start";
if($run_company = $conn->query($get_company)){
while($row = $run_company->fetch_assoc()){
$data[] = $row['company'];
}
echo json_encode($data);
}
?>
So now when we request more data, we can send { o: 10, l: 100, term: "app" } for example. Pulling from the example you gave, it might look a bit like this:
_scrollMenu: function(ul, items) {
var self = this;
var startShow = 10;
var maxShow = 100;
var results = [];
var pages = Math.ceil(items.length / maxShow);
$.ajax({
url: "function/all_company_auto.php",
type: "POST",
data: {
o: startShow,
l: maxShow,
term: self.request.term
},
dataType: "json",
sucess: function(data);
$.each(data, function(k, v) {
results.push(v);
});
});
//results = items.slice(startShow, maxShow);
if (pages > 1) {
$(ul).scroll(function() {
if (isScrollbarBottom($(ul))) {
++window.pageIndex;
if (window.pageIndex >= pages) return;
results = items.slice(window.pageIndex * maxShow, window.pageIndex * maxShow + maxShow);
//append item to ul
$.each(results, function(index, item) {
self._renderItem(ul, item);
});
//refresh menu
self.menu.deactivate();
self.menu.refresh();
// size and position menu
ul.show();
self._resizeMenu();
ul.position($.extend({
of: self.element
}, self.options.position));
if (self.options.autoFocus) {
self.menu.next(new $.Event("mouseover"));
}
}
});
}
$.each(results, function(index, item) {
self._renderItem(ul, item);
});
}
The problem with this example is that the amount of items is known. You would have to do a preliminary query to collect the total possible results. So this will start to fall apart. Also this is not the best use of autocomplete.
If you could clarify why you want to get so many results instead of limiting it, it would better.