I have developed a code to fetch database results.
Now I need to filter the database results using java script live filtering method. But the filtering part was not successful.
Can anybody help me to figure it out?
Code:
<div class="col-lg-8" >
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<center><h3>Wasthu</h3></center>
<?php
$sql = "SELECT * FROM services where service='Architecture'";
$result = $con->query($sql);
if ($result->num_rows > 0)
{
while ($row = $result->fetch_assoc())
{
?>
<div class="col-lg-3" style="border: outset;">
<div class="header">
<?php echo '<img src="' . $row['image_path4']. '" width="100" height="100">'; ?>
</div>
<ul class="body" id="myUL">
<li>
<a href="www.google.com" target="_blank">
<?php echo $row ['name']; ?>
</a>
<i class="fa fa-envelope-square"><?php echo $row ['email']; ?></i>
<br>
<i class="fa fa-address-book"><?php echo $row ['address']; ?></i>
<br>
<?php echo $row ['years']; ?>
<br>
<i class="fa fa-info"><?php echo $row ['details']; ?></i>
<div style="background-color: #000000">
<font color="#FFFFFF"><?php echo $row ['district']; ?></font>
<font color="#FFFFFF"><?php echo $row ['city']; ?></font>
</div>
</li>
</ul>
</div>
<?php
}
}
else
{
echo "0 results";
}
$con->close();
?>
</div>
<script>
function myFunction()
{
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++)
{
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = "";
}
else
{
li[i].style.display = "none";
}
}
}
</script>
The image given below shows database fetched results before filter
This image shows how needed result disappear when search. Here I want to search sadeepa.when I search It, it disappears
