Update: Quick Access continues to get a lot of traffic; thanks, everyone, for using our script! We’ve been excited to see some examples of how people are using it out there.
We’ve changed and tweaked the formula a bit since we posted this, and are thinking of releasing a 1.1. If there’s anything any of you would like to see QA do that it doesn’t already, please let us know in the comments!
Every higher ed website is going to have landing pages with a ton of links. Your various audiences each demand one-click access to what they need, but the resulting page is rarely very scannable and its hard to categorize these sundry links in ways that meet the expectations of all your visitors.
Enter Quick Access. Quick Access is a lightweight Javascript solution we first created for Haverford College to address this problem (we later ported this to jQuery for versions for Kenyon College and Southwestern University). It’s best summed up with: “Just start typing what you’re looking for.”
Quickaccess dynamically searches links in a particular div for text and keyword matches. To add quickaccess to your page, all you need is your existing series of links; to additional keywords, just use standard HTML comments (<!– –>) within the links.
I’ve ported the latest version to a jQuery plugin. You can see a robust example here and grab the source here. Getting started is as simple as:
$('input#inputselector').quickaccess({selector:'.searchselector'});
And of course you’ll need a recent version of jQuery.
It’s largely undocumented at the moment but it’s super-straightforward; configuration settings and examples appear as comments at the start of the JS source.
We hope you find it useful, and let us know if you have any questions!
You can follow any responses to this entry through the RSS 2.0 feed. Respond to this post.
Cool stuff Donald! I’m using this in the prototype site that will become our next university website. Rather than embedding additional keywords as comments, how about using the title attribute? What do you think?
Jason,
We’d used the title attribute in the first several versions of this for Haverford, but switched to comments before the site went live. What we decided was that the title attribute has a meaning of its own (both semantic and behavioral) and we shouldn’t co-opt that for our own purposes (see also a future post that I’ll call “Our Beef with Microformats”). Basically, it was really annoying to have “PoliSci, International Relations,American” show up when you moused over the link for “Political Science”.
If you’d prefer the title attribute approach, though, just change line 50 of the QA.js to:
qa.matches = qa.links = $(s.selector).each(function() { $.data(this,'keywords',(this.innerHTML+$(this).attr('title')).toLowerCase().replace(/[,-\/]/g,' ').replace(/[^a-zA-Z 0-9]+/g,'')); }); // grab links, attach data to match against(Adding “+$(this).attr(’title’)” to the matched text.)
I’d love to see a sample page when you get it up and running!
This is great. Could you tell me what it is that writes the input box in the quickquery div? I can’t figure it out!
Klark, the input box is added in lines 39 and 40:
if(this.is('input[type=text],textarea')) qa.search=this; // if the specified item is an input element, use it else qa.search = this.prepend('<input type="text" id="qa_search_query"/>').children().eq(0); // otherwise, add an input inside of itSo when you call quickaccess with $(’#example’).quickaccess(settings);, it looks for #example; if #example is a text input or textarea, it uses it as the quickaccess query box; otherwise, if #example is a div or paragraph (etc) line 40 inserts a query box into that element (prepended before the elements other content). Let me know if that helps.