I made a website where I have a table with more than 13,000 records, I'm trying to put a filter where each letter user enters site refresh to filter records with this letter, but the field loses focus on submit.
how can I solve this?
I tried to use cookie following example of sephiith question, but it still fails. Example how i submit:
$(function() {
$('input').keyup(function() {
this.value = this.value.toLocaleUpperCase();
this.form.submit();
});
});
Code of Page
<?php
session_start();
if (!isset($_SESSION['LOGIN'])) {
header("location: index.php");
}
include("config.php");
require("rep.php");
if (isset($_SESSION['active']) && (time() - $_SESSION['active'] > 1800)) {
session_unset();
session_destroy();
}
$_SESSION['active'] = time();
?>
<html>
<head>
<? include("meta.txt"); ?>
<title><? echo $config[TITLE]; ?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
<!--
@import url("<? echo $config[CSSFORM]; ?>");
@import url("<? echo $config[CSS]; ?>");
-->
</STYLE>
<script language="javascript" type="text/javascript" src="<? echo $config[JAVASCRIPT]; ?>"></script>
<script language="javascript" type="text/javascript" src="./js/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("input").keyup(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
this.value = this.value.toLocaleUpperCase();
if ( code == 13 ) {
this.form.submit();
}
});
});
</script>
</head>
<body onload="showGMTDateTime()">
<center>
<!-- begin -->
<div id="begin">
<!-- Banner -->
<? include("includes/banner.php"); ?>
<!-- Menu -->
<? include("includes/menu/menu01.html"); ?>
<!-- Msg -->
<? include("includes/msg.php"); ?>
<div class="DivCad">
<h1 class="prod" align="center">List of Produts</h1>
<?php
$rep = new Rep();
$GProd = $rep->SelectProd(0, 0, 0, $sql);
if (!$GProd) {
echo "<h4>List of Produts empty!</h4>";
} else {
$sql = "";
$get = "";
If ( $_REQUEST['group'] ) {
$sql.= " AND (GROUP LIKE '%".$_REQUEST['group']."%')";
$get.= "&group=" . $_REQUEST['group'];
}
If ( $_REQUEST['model'] ) {
$sql.= " AND (MODEL LIKE '%".$_REQUEST['model']."%')";
$get.= "&model=" . $_REQUEST['model'];
}
If ( $_REQUEST['line'] ) {
$sql.= " AND (LINE LIKE '%".$_REQUEST['line']."%')";
$get.= "&line=" . $_REQUEST['line'];
}
If ( $_REQUEST['Prod'] ) {
$sql.= " AND (PROD LIKE '%".$_REQUEST['Prod']."%')";
$get.= "&Prod=" . $_REQUEST['Prod'];
}
If ( $_REQUEST['desc'] ) {
$sql.= " AND (DESC LIKE '%".$_REQUEST['desc']."%')";
$get.= "&desc=" . $_REQUEST['desc'];
}
?>
<table id="Prod">
<form id="frmprodut" name="frmprodut" method="post" action="Prod.php">
<thead>
<tr>
<th width="30" align="center">
<input type="text" name="group" value="<?php echo $_REQUEST['group']; ?>" class="inputs" size="2" maxlength="4" placeholder="Group">
</th>
<th width="30" align="center">
<input type="text" name="model" value="<?php echo $_REQUEST['model']; ?>" class="inputs" size="9" maxlength="9" placeholder="Model">
</th>
<th width="30" align="center">
<input type="text" name="line" value="<?php echo $_REQUEST['line']; ?>" class="inputs" size="9" maxlength="9" placeholder="Line">
</th>
<th width="200" align="center">
<input type="text" name="Prod" value="<?php echo $_REQUEST['Prod']; ?>" class="inputs" size="15" maxlength="15" placeholder="Prod">
</th>
<th width="420" align="left">
<input type="text" name="desc" value="<?php echo $_REQUEST['desc']; ?>" class="inputs" size="20" maxlength="30" placeholder="Desc">
</th>
<th width="10" align="center">
<img alt="Add Filter" src="./imagens/filter_add.png" width="16" height="16" onclick="$('#frmprodut').submit()">
</th>
<th width="10" align="center">
<img alt="Clear Filter" src="./imagens/filter_del.png" width="16" height="16" onclick="javascript:window.location='Prod.php'; $('#frmprodut')[0].reset();">
</th>
</tr>
</thead>
</form>
<thead>
<tr>
<th align="center">Group</th>
<th align="center">Model</th>
<th align="center">Line</th>
<th align="center">Prod</th>
<th colspan="3" align="left">Desc</th>
</tr>
</thead>
<tbody>
<?php
$GProd = $rep->SelectProd(0, 0, 0, $sql);
$page = (isset($_REQUEST['page'])) ? $_REQUEST['page'] : 1;
$numLine = 1;
$GTotal = count($GProd);
$reg = 20;
$next = $page + 1;
$prev = $page - 1;
$numpages = ceil($GTotal / $reg);
$last = $numpages - 1;
$adjacent = 2;
$begin = ($reg * $page) - $reg;
$AProd = $rep->SelectProd(1, $inicio, $reg, $sql);
$TNow= count($AProd);
for ($i = 0; $i < $TNow; $i++) {
$Prod = new Prod($AProd[$i]['GROUP'], $AProd[$i]['MODEL'], $AProd[$i]['LINE'], $AProd[$i]['PROD'], $AProd[$i]['DESC']);
if (($numLine % 2) == 0) {
echo "<tr>";
} else {
echo "<tr class=\"alt\">";
}
echo "<td align=\"center\">" . $Prod->GetGroup() . "</td>";
echo "<td align=\"center\">" . $Prod->GetModel() . "</td>";
echo "<td align=\"center\">" . $Prod->GetLine() . "</td>";
echo "<td align=\"left\">" . $Prod->GetProd() . "</td>";
echo "<td align=\"left\" colspan=\"3\">" . $Prod->GetDesc() . "</td>";
echo "</tr>";
$numLine++;
}
?>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<div id="paging">
<ul>
<?php
if ($page > 1) {
$pagination = "<li><a href=\"Prod.php?page=" . $prev . $get ."\">Prev</a></li>";
}
if ($numpages <= 5) {
for ($i = 1; $i < $numpages + 1; $i++) {
if ($i == $page) {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
} else {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
}
}
}
if ($numpages > 5) {
if ($page < 1 + (2 * $adjacentes)) {
for ($i = 1; $i < 2 + (2 * $adjacentes); $i++) {
if ($i == $page) {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
} else {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
}
}
$pagination .= "<li class=\"dot\">...</li>";
$pagination .= "<li><a href=\"Prod.php?page=" . $last . $get . "\">".$last."</a></li>";
$pagination .= "<li><a href=\"Prod.php?page=" . $numpages . $get . "\">".$numpages."</a></li>";
} elseif ($page > (2 * $adjacentes) && $page < $numpages - 3) {
$pagination .= "<li><a href=\"Prod.php?page=1\">1</a></li>";
$pagination .= "<li><a href=\"Prod.php?page=2\">2</a></li>";
$pagination .= "<li class=\"dot\">...</li>";
for ($i = $page - $adjacentes; $i <= $page + $adjacentes; $i++) {
if ($i == $page) {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
} else {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
}
}
$pagination .= "<li class=\"dot\">...</li>";
$pagination .= "<li><a href=\"Prod.php?page=" . $last . $get . "\">".$last."</a></li>";
$pagination .= "<li><a href=\"Prod.php?page=" . $numpages . $get . "\">".$numpages."</a></li>";
} else {
$pagination .= "<li><a href=\"Prod.php?page=1\">1</a></li>";
$pagination .= "<li><a href=\"Prod.php?page=2\">2</a></li>";
$pagination .= "<li class=\"dot\">...</li>";
for ($i = $numpages - (4 + (2 * adjacentes)); $i <= $numpages; $i++) {
if ($i == $page) {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\" class=\"active\">". $i ."</a></li>";
} else {
$pagination .= "<li><a href=\"Prod.php?page=" . $i . $get . "\">". $i ."</a></li>";
}
}
}
}
if ($next <= $numpages && $numpages > 2) {
$pagination .= "<li><a href=\"Prod.php?page=" . $next . $get . "\">Next</a></li>";
}
echo $pagination;
?>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
<?php } ?>
</div>
</div>
</center>
</body>
</html>
Try to do it with ajax so the page wont refresh at all, it seems not practical to refresh the whole page at on letter press:
Html:
<input type="text" id="field"/>
<div id="showContent"></div>
jQuery:
function findWithLetter(){
$("#field").on("keyup",function(e){
var Val = $(this).val();
$.post("url\to\php",{Val:Val},function(answer){
$("#showContent").html(answer);
});
});
}
PHP:
$val = $_POST['Val'];
$ans = "";
$query = $mysqli->query("SELECT * FROM `table` WHERE name LIKE '$val%'");
while($row = $query->fetch_object()){
$ans.="<div>$row->name</div>";
}
echo $ans;