Estoy tratando de cargar más datos en el desplazamiento en mi cuadro de texto de autocompletar. Cuando el usuario se desplaza hacia abajo, funcionará como paginación cargando más resultados según sea necesario.
Algo como esto
He estado buscando durante bastante tiempo y tengo problemas para encontrar un problema similar al mío.
<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>Aquí está mi código php.
<?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); } ?>Para comenzar, su PHP deberá poder recopilar una cantidad condicional de resultados.
Esto podría verse así:
<?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); } ?> Ahora, cuando solicitemos más datos, podemos enviar { o: 10, l: 100, term: "app" } por ejemplo. Basándose en el ejemplo que diste, podría verse un poco así:
_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); }); }El problema con este ejemplo es que se conoce la cantidad de artículos. Habría que hacer una consulta previa para recoger el total de resultados posibles. Así que esto comenzará a desmoronarse. Además, este no es el mejor uso de autocompletar.
Si pudiera aclarar por qué quiere obtener tantos resultados en lugar de limitarlo, sería mejor.