- MooTools -
- June 27th, 2008,
- 10 Responses
Live Search with Quicksilver Style – MooTools 1.2 port
- 27 June
A few days ago good people of Orderedlist.com published a post regarding a Livesearch script with a twist
... Today I'll be re-twisting and mooifying their work.
Basically what they did was creating a prototype-based live search script which uses QuickSilver’s scoring algorithm as an output enhancement.
We all know Prototype by itself pretty much… well, sucks. So, I took my time and ported their work to the new MooTools version – the one and only example.
var QuicksilverLiveSearch = new Class({ Implements: Options, options: { field: $empty, list: $empty }, initialize: function(options) { this.setOptions(options); this.field = $(this.options.field); this.list = $(this.options.list); if(this.field && this.list) { this.rows = $A([]); this.cache = $A([]); this.setupCache(); this.form = this.field.getParent('form'); this.form.addEvent('submit', function(e) { e.stop(); }); this.field.addEvent('keyup', this.filter.bind(this)); this.filter(); } }, setupCache: function() { this.list.getChildren().each(function(child) { this.cache.push(child.get('html').toLowerCase()); this.rows.push(child); }.bind(this)); this.cache_length = this.cache.length; }, filter: function() { if(!this.field.get('value')) { $$(this.rows).set('styles', {display: 'block'}); return; } this.displayResults(this.getScores(this.field.value.toLowerCase())); }, displayResults: function(scores) { $$(this.rows).set('styles', {display: 'none'}); scores.each(function(score) { this.rows[score[1]].set('styles', {display: 'block'}); }.bind(this)) }, getScores: function(term) { var scores = $A([]); for(var i=0; i < this.cache_length; i++) { var score = this.cache[i].score(term); if(score > 0) { scores.push([score, i]); } } return scores.sort(function(a, b) { return b[0] - a[0]; }); } });
And the trigger:
window.addEvent('domready', function() { new QuicksilverLiveSearch({ field: $('q'), list: $('posts') }); });
Speaking of rank scoring, Jan Kassen has also developed a nice and dandy version of a live search script with some fancy highlighting options – worth checking out.
10 responses so far. Care to add one yourself?
-
Grzegorz Kazulak June 27th, 2008 at 15:59
Looks quite funky :-)
-
links for 2008-06-30 | iKeif June 30th, 2008 at 17:31
[...] 3 hours agoAn awesome reference article about CSS floats. I need to add this to my own reference.Oskar Krawczyk – blog.olicio.us » Blog Archive » Live Search with Quicksilver Style – MooTools… 21 hours agoI love that every time one library does something cool, a developer that utilizes [...]
-
Sideburnr » Blog Archive » Prototype - jQuery LiveSearch (QuickSilver-Like) July 10th, 2008 at 15:43
[...] (07.08.2008): And a MooTools version of the [...]
-
Nanda January 13th, 2009 at 13:13
Thanks, this is awesome!
-
Robin Grass January 15th, 2009 at 11:08
I know this is a old post but, I actually ported the scrore method to Mootools when I saw this post and forgot about it, anyways, here it is; http://pastry.se/7768/
-
h-a-r-v February 16th, 2009 at 05:06
What about adding images support? You know.. the NK-style (yeah, cheers from Poland - not that I have an account there ;-) + some pagination maybe.. mmmmm… Ajax loader (just like in the Uvumi Gallery) would be nice as well. I dare you, hehe.
TBH - I just need such a script. I’ll live without it, but it’s kind of popular way to handle image-based pages of any kind (galleries, user lists and so on) and apparently there’s no such thing based on mootools right now.
-
Oskar Krawczyk February 16th, 2009 at 10:09
Well, I’m free for freelance currently so… you know :-)
-
h-a-r-v February 16th, 2009 at 15:09
Sure. When we get to the module where I’m gonna need that (we’re building a big vortal currently) we’ll of course consider it :-) But it’s not entirely up to me, so I’ll have to convince my partner first (a good price sent me via e-mail is the right argument). Still.. because I love mootools community and owe it a lot already I guess we’d keep that script open-source anyway :-)
-
h-a-r-v February 16th, 2009 at 15:12
It is possible due to the pressure of time that we won’t work on it now, but we plan a lot of upgrades and even ’service-packs’ to the site later on when its basic structure is published, so maybe then we’ll start some long-term cooperation as we’ll need more moostuff unavailable open-source.
-
h-a-r-v February 16th, 2009 at 15:36
Oh, and I can see you’ve taken care of date.js and validator.js already. I was just about to do that now. Wanna take care of the rest? You’ve done really well and fast, so I guess my help won’t be necessary. But if you somehow won’t be able to translate some upcoming stuff (shit happens), lemme know via e-mail, I’ll fill in for you. Sorry for off-topic ;)
