<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Little Things</title>
<?php echo link_tag('resources/css/style.css'); ?>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url('resources/js/script.js');?>" ></script>
<script type="text/javascript">var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>
</head>
<body>
<div id="container">
<div id="top">
<img id="logo" src="<?php echo base_url('resources/images/logo.jpg'); ?>" alt="litLogo"/>
</div>
<div id="main">
<div id='cssmenu'>
<ul>
<li class='active'><a href="<?php echo base_url('index.php/LittleController/index');?>"><span>Home</span></a></li>
<li class="element"><a href='#'><span>Shopping Cart</span></a></li>
<li class="element"><a href='#'><span>Wish List</span></a></li>
<li class="element"><a href='#'><span>Contact</span></a></li>
<li id="name">
<?php
if($this->session->userdata('email'))
{
echo "<a href='#'><span>Welcome ".$user."!</span></a>";
}
else
{
echo "<a href='#'><span>Welcome Guest!</span></a>";
}
?>
<?php
if($this->session->userdata('email'))
{
echo '<li class="element"><a href="'.base_url("index.php/LittleController/logout").'"><span>Logout</span></a></li>';
}
else
{
echo '<li class="element"><a href="'.base_url("index.php/LittleController/login").'"><span>Login</span></a></li>';
}
?>
</li>
<li class="element"><a href="<?php echo base_url('index.php/LittleController/signup');?>"><span>Sign Up</span></a></li>
</ul>
</div>
<div class="tables" id="tables">
<input type="text" class="search" placeholder="Type to search">
<?php
$imgDir="../../resources/images/thumbs/";
echo "<table id='table'>";
echo "<tbody class='list'>";
echo "<tr bgcolor='#E60000'>";
echo "<th>Name</th><th>Product Line</th><th>Product Scale</th><th>Product Description</th><th>Price</th><th>Image</th>";
echo "</tr>";
$i=0;
foreach($Products as $key => $value)
{
$i++;
if($i%2==0)
{
echo "<tr bgcolor='#EE4D4D' width='100%'>";
//echo '<td>'.$value["ID"].'</td>';
echo "<td class='pName'>".$value["productName"]."</td>";
echo "<td class='pLine'>".$value["productLine"]."</td>";
echo "<td class='pScale'>".$value["productScale"]."</td>";
echo "<td class='pDes'>".$value["productDescription"]."</td>";
echo "<td class='buyPrice'>".$value["buyPrice"]."</td>";
//echo '<td>'.$value["QtySold"].'</td>';
echo "<td class='image'><img src='".$imgDir.$value['image']."' height='100' width='100'/></td>";
//echo '<td>'.$value["ABV"].'</td>';
echo "</tr>";
}
else
{
echo "<tr bgcolor='#F28080' width='100%'>";
//echo '<td>'.$value["ID"].'</td>';
echo "<td class='pName'>".$value["productName"]."</td>";
echo "<td class='pLine'>".$value["productLine"]."</td>";
echo "<td class='pScale'>".$value["productScale"]."</td>";
echo "<td class='pDes'>".$value["productDescription"]."</td>";
echo "<td class='buyPrice'>".$value["buyPrice"]."</td>";
//echo '<td>'.$value["QtySold"].'</td>';
echo "<td class='image'><img src='".$imgDir.$value['image']."' height='100' width='100'/></td>";
//echo '<td>'.$value["ABV"].'</td>';
echo "</tr>";
}
}
echo "</tbody>";
echo "</table>";
?>
</div>
<script type="text/javascript">
var options = {
valueNames: [ 'pName', 'pLine', 'pScale', 'pDes', 'buyPrice','image' ]
};
var userList = new List('tables', options);</script>
</div>
</div>
</body>
</html>
So this is my code. I am trying to filter the table as I am typing into the text box. Any help appreciated.
I've tried following the tutorials but they do not seem to work at all... any ideas?
I find it difficult to understand and apply to my own website, the code I have for filtering is taken from the internet is well.
