knowledge/front-end-frameworks
1
0
Fork 0
mirror of https://github.com/Llewellynvdm/front-end-frameworks.git synced 2025-01-23 12:38:24 +00:00
Code Issues Releases Activity

add frontend search

Browse Source
This commit is contained in:
Joah Gerstenberg 2013-12-14 09:55:08 -06:00
parent b9091639ec
commit 45ca5853b8
4 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
compare.html
View File

@ -43,8 +43,14 @@
</div> </div>
</section> </section>
<!-- That's it ! compartion table :) -->
<section> <section>
<div class="search">
<input type="text" placeholder="Search" id="search">
</div>
</section>
<!-- That's it ! compartion table :) -->
<section id="comparisonTable">
<nav> <nav>
<blockquote class="guide">Browser version " + " means latest version .</blockquote> <blockquote class="guide">Browser version " + " means latest version .</blockquote>
<div class="parent"> <div class="parent">
@ -1788,6 +1794,9 @@
</div> </div>
</div> </div>
<div class="parent" id="noSearch">
There were no search results matching <span></span>
</div>
</nav> </nav>
</section> </section>
@ -1824,6 +1833,7 @@
<!-- Scripts --> <!-- Scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script> <script>
$('nav .parent ul').on('click', function (e) { $('nav .parent ul').on('click', function (e) {
$(this).next('.info').toggleClass('active') $(this).next('.info').toggleClass('active')

19
css/style.css
View File

@ -141,6 +141,25 @@ section p:last-child {
top: 50%; top: 50%;
margin-top: -7px; margin-top: -7px;
} }
#noSearch {
display: none;
text-align: center;
}
#search {
width: 100%;
margin-top: 5px;
font-size: 16px;
line-height: 25px;
font-family: 'Droid Sans';
}
#search:focus {
outline: none;
border-color: #900;
}
/* Table */ /* We should use nav and ul li for collapsing details */ /* Table */ /* We should use nav and ul li for collapsing details */
nav { nav {
width: 980px; width: 980px;

1
index.html
View File

@ -12,6 +12,7 @@
<script type="text/javascript" src="javascripts/modernizr.js"></script> <script type="text/javascript" src="javascripts/modernizr.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/headsmart.min.js"></script> <script type="text/javascript" src="javascripts/headsmart.min.js"></script>
<script type="text/javascript" src="javascripts/search.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$('#main_content').headsmart() $('#main_content').headsmart()

25
js/search.js Normal file
View File

@ -0,0 +1,25 @@
$(document).ready(function(){
$("input#search").keyup(function(){
var query = $(this).val();
if (!query) {
$("#comparisonTable div.parent").show();
$("#noSearch").hide();
return;
}
var regex = new RegExp(query, "ig"), count = 0;
$("#comparisonTable div.parent:not(#noSearch)").each(function(){
if ($(this).text().search(regex) < 0) {
$(this).hide();
} else {
$(this).show();
count += 1
}
});
if (count == 0) {
$("#noSearch span").text(query)
$("#noSearch").show();
} else {
$("#noSearch").hide();
}
});
});