benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Nearly complete cross-browser search with animation

Browse source
This commit is contained in:
Wesley Moore 2010-07-07 08:21:38 +10:00
parent 4a37d4dc8a
commit 6804ca2ae9
1 changed files with 38 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
output/js/application.js
View file

@ -9,41 +9,49 @@ jQuery(function() {
$('#articles li').css({height: 'auto', opacity: 1.0}); $('#articles li').css({height: 'auto', opacity: 1.0});
} }
function refresh_search(e) { function refresh_search(elem) {
var input = $(this); var input = elem || $(this); // Pass a jQuery object or use this
var value = input.val() || ""; var value = input.val() || "";
var q = value.toLowerCase(); var q = value.toLowerCase();
//if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)) $('#articles li').each(function(i) {
// if(e.which >= 32) {
// q += String.fromCharCode(e.which).toLowerCase();
// }
console.log('q: ' + q);
if(q == "") {
reset_search();
return;
}
$('#articles li').filter(function(i) {
var article = $(this); var article = $(this);
return article.text().toLowerCase().indexOf(q) < 0; var style;
}).animate({height: 0, opacity: 0}, {queue: false, duration: 500}); if(article.text().toLowerCase().indexOf(q) >= 0) {
style = {height: 'show', opacity: 1.0}
}
else {
style = {height: 'hide', opacity: 0}
}
if(article.css('opacity') != style.opacity) article.animate(style, {queue: false, duration: 500});
});
} }
$('#search').show(); $('#search').show();
//.keypress(refresh_search)
$('#search input') var input = $('#search input');
.bind("search", refresh_search); if(input.length > 0) {
// .bind("click", refresh_search) // Setup incremental search on Articles pages
// .bind("cut", refresh_search) if(!(input.attr("onsearch") === undefined)) {
// .bind("paste", refresh_search); console.log("Using search event for search");
input.bind("search", refresh_search);
}
else {
// Poll the field for its value while it has focus
console.log("Using poll mode for search");
var last_value;
input.focus(function() {
last_value = input.val();
input.everyTime('500ms', function() {
if(input.val() != last_value) {
refresh_search(input);
last_value = input.val();
}
});
}).blur(function() {
input.stopTime();
});
}
}
}); });
/* Setup search
If onsearch is supported use that
else if oninput is used then use that
else setup a poller to poll the value of the search box while it has focus. Stop polling when the field loses focus
*/