jQuery Smart Search Show/Hide Content Elements
<!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>Ich möchte mit der Möglichkeit, nach bestimmten Inhalten zu suchen, eine jQuery Suche lassen und die Ergebnisse zu zeigen, sie dann wieder verstecken.
This post einen Teil meines Problems behoben. Eine andere Sache ist, dass, wenn die Website vollständig geladen ist, nur das Suchfeld angezeigt werden sollte und die Suchdaten sollten ausgeblendet werden. Also habe ich versucht, sie mit CSS-Styling zu verstecken und verwendet.
Sie können sehen, was ich tue here.
So wie Sie sehen, gibt es nur ein Suchfeld oben rechts auf der Seite. Wenn Sie das J-Zeichen eingeben, wird das Suchergebnis angezeigt. Wenn Sie jedoch das J-Zeichen löschen, wird jedes Element angezeigt. Ich will das nicht. Ich möchte, dass alle anderen Elemente sich immer noch verstecken und angezeigt werden, während wir sie durchsuchen. Eine andere Sache, die ich gefunden habe, ist, dass ich möchte, dass die Suche das Eingabezeichen mit dem ersten Zeichen der Elementnamen überprüft. Ich meine zum Beispiel, wenn wir vier Gegenstände mit den folgenden Namen haben: (James, Jacob, Jack, Jason), wenn Sie das J in das Suchfeld eingeben, werden alle angezeigt, aber wenn Sie Jac eingeben, muss es angezeigt werden Sie zwei Artikel und wenn Sie einen anderen Charakter in Ruhe legen, zeigt Ihnen nichts!
Ich interessiere mich für eine separate Schaltfläche, wo, wenn ich darauf klicke, alle Elemente angezeigt werden und wenn ich erneut darauf klicke, verschwinden die Elemente.
Ein Vorschlag http://www.redotheweb.com/2013/05/15/client-side-full- text-search-in-css.html Ich habe ein Tutorial in ycombinator Website gefunden, es kann Ihnen helfen, mit reinem CSS zu suchen. Probieren Sie es aus, wenn Sie möchten. – Vuong
Oder ein klares Beispiel, um es zu verstehen http://jets.js.org/ – Vuong