forked from wezm/wezm.net
Simplify search on articles pages
This commit is contained in:
Wesley Moore
parent
d4c0954c01
commit
75ba506b2f
6 changed files with 16 additions and 78 deletions
|
|
@ -279,7 +279,7 @@ a
|
|||
margin: 1em 2em 1em 0
|
||||
|
||||
|
||||
ul.menu
|
||||
body.articles #content nav
|
||||
padding-bottom: 1em
|
||||
|
||||
|
||||
|
|
@ -289,8 +289,6 @@ ul.menu
|
|||
display: none
|
||||
float: left
|
||||
margin-right: 20px
|
||||
background: #fff url(/images/srch_l.gif) 0 0 no-repeat
|
||||
padding-left: 19px
|
||||
|
||||
fieldset
|
||||
margin: 0
|
||||
|
|
@ -298,32 +296,11 @@ ul.menu
|
|||
border: 0
|
||||
|
||||
label
|
||||
color: #999
|
||||
display: none
|
||||
font-weight: normal
|
||||
padding-right: 10px
|
||||
|
||||
input
|
||||
border: 0
|
||||
margin: 0
|
||||
outline: 0
|
||||
vertical-align: middle
|
||||
height: 19px
|
||||
width: 180px
|
||||
width: 132px
|
||||
padding: 3px
|
||||
background: #fff url(/images/srch_bg.gif) 0 0 repeat-x
|
||||
float: left
|
||||
font: 11px/13px "Lucida Grande", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
|
||||
color: #000
|
||||
|
||||
span.clear
|
||||
background: #fff url(/images/srch_r.gif) 0 0 no-repeat
|
||||
float: left
|
||||
width: 19px
|
||||
height: 19px
|
||||
clear: none
|
||||
|
||||
.active
|
||||
background-position: 0 -19px
|
||||
|
||||
|
||||
#respond
|
||||
|
|
|
|||
|
|
@ -2,37 +2,22 @@
|
|||
<html>
|
||||
<head>
|
||||
<%= render '_head' %>
|
||||
<script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/js/jquery.quicksand.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/js/liquidmetal.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/js/application.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
jQuery(function() {
|
||||
WezM.showJavascriptWidgets();
|
||||
$('#search input').keypress(function(e) {
|
||||
function search_handler(e) {
|
||||
var input = $(this);
|
||||
var q = (input.val() + String.fromCharCode(e.which)).toLowerCase();
|
||||
var value = input.val();
|
||||
// var q = (value + String.fromCharCode(e.which)).toLowerCase();
|
||||
var q = value.toLowerCase();
|
||||
|
||||
var filtered_articles = $('#articles li').filter(function(i) {
|
||||
$('#articles li').filter(function(i) {
|
||||
var article = $(this);
|
||||
var text = article.text().toLowerCase();
|
||||
// var score = LiquidMetal.score(text, q);
|
||||
// article.attr("data-score", score);
|
||||
// return score > 0;
|
||||
return text.indexOf(q) >= 0;
|
||||
})
|
||||
|
||||
// Sort results
|
||||
// var sorted_articles = filtered_articles.get().sort(function(a, b) {
|
||||
// var valA = parseFloat($(a).attr("data-score"));
|
||||
// var valB = parseFloat($(b).attr("data-score"));
|
||||
// return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
|
||||
// });
|
||||
|
||||
$("#articles").quicksand($(filtered_articles));
|
||||
});
|
||||
return article.text().toLowerCase().indexOf(q) < 0;
|
||||
}).animate({height: 0, opacity: 0}, {queue: false, duration: 500});
|
||||
}
|
||||
$('#search').show();
|
||||
$('#search input').keypress(search_handler).change(search_handler).focus();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -48,7 +33,7 @@
|
|||
['Personal', personal_articles.size],
|
||||
]
|
||||
%>
|
||||
<ul class="inline menu">
|
||||
<nav class="inline menu">
|
||||
<% menu.each do |menu_item|
|
||||
label, count = menu_item
|
||||
path = (label != "All" ? '/' + label.downcase : '') + "/articles/"
|
||||
|
|
@ -64,22 +49,15 @@
|
|||
<li id="search">
|
||||
<fieldset>
|
||||
<label for="query">Search</label>
|
||||
<input type="text" name="q" id="query" value="" />
|
||||
<span class="clear"></span>
|
||||
<input type="search" name="q" id="query" value="" />
|
||||
</fieldset>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<ul id="articles" class="articles">
|
||||
<%= yield %>
|
||||
</ul>
|
||||
|
||||
<div class="pagination">
|
||||
<% pagepath = @item.identifier; pagepath += 'page/' if pagepath !~ %r{/page/$} %>
|
||||
<a href="<%= pagepath %>" class="newer">« Newer</a>
|
||||
|
|
||||
<a href="<%= pagepath %>#2" class="older">Older »</a>
|
||||
</div>
|
||||
</div>
|
||||
<%= render '_footer' %>
|
||||
</body>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 65 B |
Binary file not shown.
|
Before Width: | Height: | Size: 303 B |
Binary file not shown.
|
Before Width: | Height: | Size: 357 B |
|
|
@ -12,23 +12,6 @@ var WezM = {
|
|||
if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { // TODO: This is too generic (iPhone)
|
||||
$('#search input').css('paddingTop', 0);
|
||||
}
|
||||
// The following should be triggered onchange for the input as well
|
||||
// (to handle things like Cut with the mouse)
|
||||
// $('#search input').keyup(function(e) {
|
||||
// var input = $(this);
|
||||
// var clear_search = $('#search .clear');
|
||||
// var value = input.attr('value');
|
||||
// if(value && (value != '')) {
|
||||
// clear_search.addClass('active');
|
||||
// }
|
||||
// else {
|
||||
// clear_search.removeClass('active');
|
||||
// }
|
||||
// });
|
||||
$('#search .clear.active').live('click', function() {
|
||||
$('#search input').attr('value', '').keyup(); // Simulate keypress to clear results
|
||||
|
||||
});
|
||||
},
|
||||
_searchItemSelected: function(article) {
|
||||
document.location.href = article.path;
|
||||
|
|
|
|||
Loading…
Reference in a new issue