Closed Ajax/JavaScript Live Search!! with secure feature

[IKAH]

Mga boss baka meron po kayung suggestion pang reference lang

ito po yung tables

tas gusto ko sana lagyan ng search na mag fiflter yung mismong table na ganito ang output

nagbabaka sakali lang baka may maka tulong TIA

 

[unoemillo]

Dimo try mag search sa github pre

 

[IKAH]

Dimo try mag search sa github pre

cge pre try ko dto may nakita ako bago lang

 

[nogats07]

cge pre try ko dto may nakita ako bago lang

Use datatables

 

[IKAH]

Use datatables

may database na yan

 

[IKAH]

yang nakalagay jan sa databse yan lahat nang galing

 

[djblazerx]

gamitin mo si uncle google or tanong ka sa github community

 

[pixkit]

My assumption is you got the user interfaced locked down already--meaning you are good with the UI. You just need the live search.

Possible solutions:
1. Client side search.

The table component that you've used must have a in-memory, in-place search capability. If it's a custom table you have created then you will have to implement your own live search.

My assumption is client side search isn't applicable for you otherwise you wont be asking this question.

2. Backend search via Sql queries

You can implement a backend search using your Sql database's fulltext queries. Google it on how to do text queries. Of course you will need to create the backend service to handle this logic so that the UI can call it.

3. Backend search via Elastic Search

This one gives you the best possibilities of all the three solutions but it is more involved. First make sure you know how to run ES. Make sure you know how to create mappings and indices. Check the ES manual or YøùTùbé. It is not that difficult. It looks intimidating at first but it is not.

With ES you can do queries like Google's (on a lower scale of course) and also have auto complete feature when making a search (but this one is really combination of ES and AJAX).

 

[IKAH]

My assumption is you got the user interfaced locked down already--meaning you are good with the UI. You just need the live search.

Possible solutions:
1. Client side search.

The table component that you've used must have a in-memory, in-place search capability. If it's a custom table you have created then you will have to implement your own live search.

My assumption is client side search isn't applicable for you otherwise you wont be asking this question.

2. Backend search via Sql queries

You can implement a backend search using your Sql database's fulltext queries. Google it on how to do text queries. Of course you will need to create the backend service to handle this logic so that the UI can call it.

3. Backend search via Elastic Search

This one gives you the best possibilities of all the three solutions but it is more involved. First make sure you know how to run ES. Make sure you know how to create mappings and indices. Check the ES manual or yôutubê. It is not that difficult. It looks intimidating at first but it is not.

With ES you can do queries like Google's (on a lower scale of course) and also have auto complete feature when making a search (but this one is really combination of ES and AJAX).

thanks

 

[Curious Pepe]

<?php
require 'database connection.php';

/* like
$server = "localhost";
$root = "root";
$pwd = "";
$db_name = "databaseName";

$conn = mysqli_connect($server, $root, $pwd , $db_name);
*/
if (isset($_POST['submitBtn'])) {
//input html element
$search = mysqli_real_escape_string($_POST['search']);


//SQL request
$sql = "SELECT * FROM tableName WHERE tableRow LIKE '%$search%' OR tableRow2 LIKE '%$search%' OR tableRow3 LIKE '%$search%' ";

$result = mysqli_query($conn,$sql);
$resultCheck = mysqli_num_rows($result);


if ($resultCheck > 0) {

while ($row = mysqli_fetch_assoc($result)) {

echo "<div>
<h3>".$row['tableRow']."</h3>
<p>".$row['tableRow']."</p>
<p>".$row['tableRow']."</p>
<p>".$row['tableRow']."</p>
</div>";

}

}else{
echo "there are no results";
}

}


?>

 

[Curious Pepe]

or pwede gawa ka ng ajax code sa index.php mo
like this kung gusto mo na habang nagtatype yung user nalabas agad yung $result

<script>
$(document).ready(function(){
let input = $(".input").val();
//parang css lang din pagdedeclare ng id or class sa AJAX
//ganto pagkakagawa ng input tag <input type="text" class="input">
$(".input").keyup(function(){
$.post("./location/search.php",{
input : input
}, function(data){
$(".spanClass").html(data);
});
});
});
</script>

bali ganto yung html mo.
<input type="text" class="input" name="searchInp" placeholder="Search here">
<span class="spanClass"></span>

 

[Curious Pepe]

and since naka POST method yung gamit sa Ajax. i call mo nalng yung name nya sa php like
$search = mysqli_real_escape_string($_POST['input']);
//yung $_POST['input'] ay galing dun sa scope ng $.post() sa ajax code.
hope this helps. di ako maalam mag explain thru comment. haha

 

[Curious Pepe]

same method lang sya ng ajax function na habang nagtatype ng username nilalabas na yung result if available or not available.