Javascript search

loktoy · Aug 25, 2023

bat ganun kapag nasearch ako first letter palang nag rereload o nag rerefresh na agad kaya tuloy yun pag ttype ko napuputol

<?php
// include '../partials/session.php';
include '../partials/newnav.php';
// Start Pagination php
if (isset($_GET['page_no']) && $_GET['page_no'] !=="") {
$page_no =$_GET['page_no'];
}else {
$page_no =1;
}
$total_records_per_page = 10;
$numbers_per_page = 10;
$offset = ($page_no - 1) * $total_records_per_page;
$previous_page =$page_no -1;
$next_page = $page_no +1;
$result_count = mysqli_query($con,"SELECT COUNT(*) AS total_records FROM registration INNER JOIN lddap ON registration.payee_name = lddap.payee_name WHERE registration.email_address = '$email_address' AND registration.password = '$password'") or die (mysqli_error($con));
$records = mysqli_fetch_array($result_count);
$total_records = $records['total_records'];
$total_no_of_page = ceil($total_records / $total_records_per_page);

$start_number = max($page_no - floor ($numbers_per_page / 2), 1);
$end_number = min($start_number + $numbers_per_page - 1, $total_no_of_page);
// End Pagination php
// Start Query to Database
$searchKeyword = isset($_GET['search']) ? $_GET['search'] : '';
$slq = "SELECT registration.payee_name, lddap.particular, lddap.amount, lddap.lddap_ada, lddap.date , lddap.status FROM registration INNER JOIN lddap ON registration.payee_name = lddap.payee_name WHERE registration.email_address = '$email_address' AND registration.password = '$password'";
// Add the search condition if keyword is present
if (!empty($searchKeyword)) {
$slq .= " AND (registration.payee_name LIKE '%$searchKeyword%' OR lddap.particular LIKE '%$searchKeyword%')";
}
$slq .= " ORDER BY lddap.date DESC LIMIT $offset , $total_records_per_page";
$result = $con->query($slq);
// End Query to database
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tracking</title>
<link rel = "stylesheet" href ="../css/bootstrap.css">
<link rel = "stylesheet" href ="../css/style.css">
<link rel="stylesheet" type="text/css" href="You do not have permission to view the full content of this post. Log in or register now.">
<script type="text/javascript" src="You do not have permission to view the full content of this post. Log in or register now."></script>
<link rel="stylesheet" href="You do not have permission to view the full content of this post. Log in or register now.">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/easy-table.min.js"></script>

</head>
<body>






<form class="container">
<div class="container">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<div class="input-group input-group-sm w-50 mb-3" >
<span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
<input type="search" class="form-control" name="search" id="search" placeholder="Search..." aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
<div id="searchresult"></div>
</div>





<table id="livesearch" >
<h2 class="caption">LDDAP-ADA SUMMARY</Summary></h2>
<thead>
<tr>
<th scope="col">Payee Name</th>
<th scope="col" >Particular</th>
<th scope="col">Amount</th>
<th scope="col">LDDAP ADA</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<?php
if($result -> num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$payee_name = $row["payee_name"];
$particular = $row["particular"] ;
$amount = $row["amount"];
$lddap_ada = $row["lddap_ada"] ;
$date = $row["date"];
$status = $row["status"];
?>
<tr>
<td data-label = "Payee Name:"><?php echo $payee_name; ?></td>
<td data-label = "Particular:"><?php echo $particular; ?></td>
<td data-label = "Amount:"><?php echo $amount; ?></a></td>
<td data-label = "Lddap-Ada:"><?php echo $lddap_ada; ?></td>
<td data-label = "Date:"><?php echo $date; ?></td>
<td data-label = "Status:"><?php echo $status;?></td>
</tr>
<?php
}
} else {
echo "No results found.";
}

$con->close();
?>
</tbody>
</table>




<div class="pt-1">
<nav aria-label="Page navigation example">
<div class= "container p-10">
<strong>Page <?= $page_no; ?> of <?= $total_records_per_page;?></strong>
<ul class="pagination">
<li class ="page-item"><a class="page-link" <?= ($page_no <= 1) ? 'disabled style="background-color:gray "' : '' ; ?> <?= ($page_no > 1) ? 'href=?page_no=' .$previous_page : '' ; ?>>Previous</a></li>
<?php for ($counter = $start_number ; $counter <= $end_number; $counter++) { ?>
<?php if ($page_no != $counter){ ?>
<li class ="page-item"><a class="page-link" href="?page_no=<?= $counter; ?>"><?= $counter; ?></a></li><?php } else { ?> <li class ="page-item"><a class="page-link active" ><?= $counter; ?></a></li><?php }?> <?php }?>

<li class ="page-item"><a class="page-link" <?= ($page_no >= $total_no_of_page) ? 'disabled style="background-color:gray"' : '' ; ?> <?= ($page_no < $total_no_of_page) ? 'href=?page_no=' .$next_page : '' ; ?>>Next</a></li>
</div>
</nav>
</div>
</div>


<script src="../js/style.js"></script>
<script src="../js/bootstrap.bundle.js"></script>
<script src="../ajax/jquery2.js"></script>
<script src="../ajax/sweetalert2.all.js"></script>

<?php
include "../partials/footer.php";
?>

<script type="text/javascript">

// search
// start
// $(document).ready(function(){
// $('#search').on("keyup",function(){
// var value = $(this).val().toLowerCase();
// $('#livesearch tr').filter(function(){
// $(this).toggle($(this).text().toLowerCase().indexOf(value) >-0);
// })
// })
// })
$(document).ready(function(){
$('#search').on("keyup",function(){
var value = $(this).val().toLowerCase();
var url = window.location.href.split('?')[0]; // Gets the current URL without query strings
window.location.href = url + '?search=' + value; // Reloads the page with the search keyword in the URL
})
})
$(function () {
var urlParams = new URLSearchParams(window.location.search); // Gets the query strings from the URL
var searchKeyword = urlParams.get('search'); // Gets the value of 'search' query string
if (searchKeyword) {
$('#search').val(searchKeyword); // Sets the value of search bar to the keyword
search_table(searchKeyword); // Calls the search_table() function with the keyword
}
});
function search_table(value) {
// Your search logic here
}
function search_table(value){
$('#livesearch tr').each (function(){
var found = 'false';
$(this).each(function(){
if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >=0){
found = 'true';
}
});
if (found == 'true'){
$(this).show();
}else {
$(this).hide();
}
});
}

//
</script>
</body>
</html>

🤖 · Aug 25, 2023

The reason why the page is refreshing when you type the search keyword is because you have an event listener attached to the keyup event of the search input field. Whenever a key is released, the event listener executes a function that reloads the page with the search keyword appended to the URL.

To prevent the page from refreshing, you can modify the event listener code. Instead of reloading the page, you can use AJAX to send a request to the server, retrieve the search results, and dynamically update the table without refreshing the entire page.

Here's an example of how you can modify the event listener code:

JavaScript:

$(document).ready(function() {
  $('#search').on("keyup", function() {
    var value = $(this).val().toLowerCase();

    // Perform an AJAX request to the server
    $.ajax({
      url: 'search.php', // Replace 'search.php' with the actual server-side script URL
      method: 'GET',
      data: { search: value },
      success: function(response) {
        // Update the table with the search results
        $('#livesearch tbody').html(response);
      }
    });
  });
});

In the above code, the search.php is the server-side script that handles the search query and returns the search results. You'll need to create this script to query the database based on the search keyword and return the HTML markup for the updated table.

Make sure to replace 'search.php' with the actual URL of your server-side script, and update the logic inside search.php to perform the database query and generate the HTML for the updated table.

By using AJAX, you can update the table dynamically without refreshing the entire page, providing a more seamless user experience.

loktoy · Aug 25, 2023

🤖 said:
The reason why the page is refreshing when you type the search keyword is because you have an event listener attached to the keyup event of the search input field. Whenever a key is released, the event listener executes a function that reloads the page with the search keyword appended to the URL.

To prevent the page from refreshing, you can modify the event listener code. Instead of reloading the page, you can use AJAX to send a request to the server, retrieve the search results, and dynamically update the table without refreshing the entire page.

Here's an example of how you can modify the event listener code:

JavaScript:

$(document).ready(function() { $('#search').on("keyup", function() { var value = $(this).val().toLowerCase(); // Perform an AJAX request to the server $.ajax({ url: 'search.php', // Replace 'search.php' with the actual server-side script URL method: 'GET', data: { search: value }, success: function(response) { // Update the table with the search results $('#livesearch tbody').html(response); } }); }); });

In the above code, the search.php is the server-side script that handles the search query and returns the search results. You'll need to create this script to query the database based on the search keyword and return the HTML markup for the updated table.

Make sure to replace 'search.php' with the actual URL of your server-side script, and update the logic inside search.php to perform the database query and generate the HTML for the updated table.

By using AJAX, you can update the table dynamically without refreshing the entire page, providing a more seamless user experience.

pano kung wala akong actual server-sede script URL anu pwede ilagay

🤖 · Aug 25, 2023

loktoy said:
pano kung wala akong actual server-sede script URL anu pwede ilagay

If you don't have a server-side script URL to handle the search query, you can modify the JavaScript code to perform a client-side search instead. This way, the page won't need to make an AJAX request to the server.

Here's an example of how you can modify the event listener code for client-side search:

JavaScript:

$(document).ready(function() {
  $('#search').on("keyup", function() {
    var value = $(this).val().toLowerCase();

    // Filter the table rows based on the search keyword
    $('#livesearch tbody tr').filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

In the above code, the event listener function filters the rows of the table based on the search keyword entered by the user. It compares the text content of each row with the search keyword and shows or hides the rows accordingly.

This implementation performs the search entirely on the client-side, without the need for a server-side script. However, keep in mind that this approach is limited to searching within the existing data loaded on the page. If you need to perform a search across a larger dataset or use database querying capabilities, you would need a server-side script to handle the search and provide the results.

Search

Search

Javascript search

loktoy

Eternal Poster

🤖

PHC Robot

loktoy

Eternal Poster

🤖

PHC Robot

Similar threads

Popular Tags

About this Thread

New Topics

Creating DLL

Programming

Magkano mag pagawa ng pang capstone project?

Python help

Help Making DLL

Updating data record PHP

Looking for Web Developer and Designer 6K php

Patulong sa web automation

ADOBE for video editing and logo design

Wed Dev Course

Popular On This Forum

Help ask lang

CREATE YOUR OWN MOVIE STREAMING SITE FOR FREe

C# monitoring system

Patulong sa web automation

Simple Accounting System need help

Gusto ko mag aral

Database Archive

Laravel "Illuminate\Database\QueryException." Error

Programming

LF: Mag pro program ng web automation.

Online statistics