<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MFA Father</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
/* This CSS is just for presentational purposes. */
.extend{max-width: 100%; max-height: 100%;}
.clear{clear: both; float: none;}
.bgwhite{background: #ffffff;}
.center{margin-left: auto; margin-right: auto;}
.display_block{display: block;}
.display_none{display: none}
.align_left{float: left;}
.align_right{float: right;}
#searchbox_container input[type="text"]{
bacground: #ffffff;
border: 1px solid #cccccc;
padding: 8px;
color: #555555;
}
#searchbox_container input[type="text"]:focus{
outline: none;
}
.infodata{
margin: 5px;
}
.infodata h1{
font-size: 15px;
padding: 0px;
margin: 0px 0px 3px 0px;
text-align: center;
text-transform: uppercase;
}
.infodata p{
font-size: 10px;
padding: 0px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.infodata img{
width: 125px;
height: 125px;
margin-bottom: 5px
}
</style>
</head>
<body>
<div class="extend clear" id="searchbox_container">
<input type="text" name="searchnow" placeholder="Search here..." value="" class="extend clear display_block align_right" />
</div>
<div class="extend clear bgwhite extend center" id="mainwrapper">
<div class="extend clear" id="info_data_container">
<div class="infodata extend display_block align_left" data-name="Jason Acapela">
<img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Jason Acapela">
<h1>Jason Acapela</h1>
<p>Web Developer</p>
</div> <!-- end of .infodata -->
<div class="infodata extend display_block align_left" data-name="Derrick Tour">
<img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Derrick Tour">
<h1>Derrick Tour</h1>
<p>UI/UX</p>
</div> <!-- end of .infodata -->
<div class="infodata extend display_block align_left" data-name="Mechelle Hill">
<img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Mechelle Hill">
<h1>Mechelle Hill</h1>
<p>System Developer</p>
</div> <!-- end of .infodata -->
</div> <!-- end of #info_data_container -->
</div> <!-- end of #mainwrapper -->
<script language="javascript" type="text/javascript">
$('.infodata').hide();
$(document).ready(function(){
$('[name="searchnow"]').on('input', function(){
var that = $(this);
$('.infodata').hide();
$('.infodata').each(function(){
if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
$(this).show();
}
});
});
});
</script>
</body>
</html>
I want to have a jQuery search with the ability to search for specific content and show the results, then hide them again.
This post fixed a part of my issue. Another matter is that when the website is fully loaded, just the search box should appear and the search data should be hidden. So I tried to hide them with CSS styling and used display="none".
You can see what I am doing here.
So as you see, there is only a search box on the top right of the page. When you input the J character, you'll see the search result, but when you delete the J character, you'll see every item appear! I don't want that. I want all of the other items to still hide and appear while we search them. Another thing that I found is that I want that the search going to check the input character with the first character of the item names. I mean that for example when we have four item with the following names: (James, Jacob, Jack, Jason), when you input the J in the search box, it's show all of them, but when you input Jac, it must show you two item and when you put any other character alone, nothing show you!
I'm interested in having a separate button where when I click on it, all items appear and when I click again on it, the items disappear.
You have a logic error in this line:
if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
The problem is that the index of an empty string in a string is 0, not -1. So, every item satisfies this conditional.
Change that line to:
if(that.val() && $(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
This works because the empty string is falsy. The conditional will fail on an empty string and since you just hid all the elements, they will stay hidden.
If you only want to match the beginning of the name, change it to:
if(that.val() && $(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) === 0){
