The Dopp-down menu: A simple autocomplete widget with some twists (July 18, 2010)
The redoubtable and formidable Sarah Dopp blogged a few months ago about designing a better drop-down menu for gender, and shortly thereafter posted a followup with a mockup of same. The mockup certainly is lovely, but as an unrepentant propellerhead, I'm prejudiced in favor of things that are ugly but do something when you mess with them. (This is not a criticism: designers, you need us, and we need you, but that's a subject for another day.)
Thus, over the course of a few weeks, I put on my JavaScript hat whenever I had a free hour, and whipped up what I couldn't resist calling the Dopp-down menu. It's essentially a small (218 LOC), simple, but flexible autocomplete widget, built on top of jQuery. In the simplest case, if you follow the conventions it's expecting, you just need to give it:
- a selector to a text field to watch and complete;
- a selector to an element to populate with suggestions;
- and a URL that can return search results.
With just a few more options, you can also have an element that gets filled in with the most popular choices, to get the user started.
Here's an example of how you call it, deliberately written to show off a number of options, taken from the demo application:
<script type="text/javascript">
$(document).ready(function() {
dopp_down_menu(
'#direct_entry_field',
'#suggestions',
'/search',
{
search_query_param: 'name',
suggestion_link_class: 'suggestion_link',
highlighted_link_class: 'highlighted',
suggestion_link_post_insert_hook:
function(_, div) {
div.append('<br/>')
},
popular_choice_url: '/popular_animals',
popular_choice_div_selector: '#popular_choices',
show_popularity_in_popular_choices: true
}
);
});
</script>
It's true that jQuery UI has its own perfectly good autocomplete widget. But here's one thing to consider: the unminified version of dopp_down_menu.js is 10K, just over half the size of the minified version of jQuery UI's autocomplete widget. Minified, dopp_down_menu.js squishes down to a svelte 6K. Also, as far as I know, jQuery UI autocomplete doesn't support the "popular choices" functionality that the Dopp-down menu does.
So please give it a try! I will add some documentation soon (promise) have now documented the API, and as always, feedback and pull requests are most welcome.
All content of this site copyright © 2009-2010 Phil Darnowsky. Released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported license. Some links in this blog may be affiliate links, which pay a small sales comission.