Category: Programming

Posted on

Extending Twitter Bootstrap Typeahead Plugin

Update: also read this post

In twitter bootstrap there is a JQuery plugin for auto completion. It’s called bootstrap-typeahaed. Typeahead uses an array of strings as datasource and is easily activated with in it’s simplest form 1 line of code.

$("#inputboxselector").typeahead({ "source":arrayOfStrings})

It’s very easy to use but somewhat limited. We needed a slightly different functionality.

Our use case:

  • 2 inputboxes, one for postal code (the numeric form) and one inputbox for the community that has that postal code.
  • In Belgium different communities can have the same postal code, and the right community should be selected on selecting a postal code. Or the right postal code should be selected on selecting a community.
  • Show both the code an city in the autocomplete but only do autocomplete and highlighting on one of the fields depending on the inputbox.

The typeahead plugin is not suited for that. It only takes an array of strings and sets the selected value in the input box. We have an array of objects.
Objects like

{ "code":"9000", "city":"Gent"}

We wanted to use typeahead instead of any other existing JQuery plugin since we’re already using twitter bootstrap.

To achieve this I extended, (actually more copied and altered) typeahead. The result is here. I called it typeaheadmap. It works just like bootstrap typeahead except that you have to add 2 more parameters to typeahead options object. Include bootstrap-typeaheadmap.js (+ JQuery 1.7+) and typeaheadmap.css (+ bootstraps base css) to use it.

View a demo
Read on for a usage example Continue reading “Extending Twitter Bootstrap Typeahead Plugin”

Posted on

Playing with bootstrap

Some guys over at Twitter created a base CSS and jQuery framework that really fun to use. Especially for not really design minded people like me.

When using Twitter bootstrap your site looks awesome in no time and adding JavaScript interactivity like tabs, drop downs and more gets easy as drinking a beer.

Really worth to check it out! I think these guys have started a new standard.

Posted on

A commuters context framework

During commuting you see a lot if people reading a book or a newspaper. But the geek or nerd that I am keeps on programming.
This led to another ‘invention of the wheel’. I wrote my own CDI ( not or not yet JSR-299 compatible) framework.
Probably nobody is waiting for that and certainly not since it’s not compatible with Spring nor Java EE cdi. But what the heck, I don’t care. I had fun writing it and that’s what it’s all about. Of course it would be even more fun if somebody else finds it usable.

Project info:
License: Apache 2.0 (of course!)
Project on sourceforge here
Wiki and bugtracker here
CI on Cloudbees here
Javadoc here
Maven Site here

Why would I use it?
1. For small applications that don’t do much Java CDI and Spring could be to much overhead. Using a fairly simple look-a-like that is more lightweight will be less overhead while you can still benefit from some kind of CDI. (e.g. for small swing apps )
2. It’s basic framework, easy to understand and extend.
3. It’s in Java 7 ( although it might run under 6, haven’t tried that )

Why did I create it?
I don’t really like the way that Java CDI forces you to create a wildgrow of annotations. I much more prefer the way Spring let you do injections but I’m not fond of the total Spring package. So perhaps the redlab-context project is an answer to both. And I have fun creating it while traveling.

If I use it myself (which I will do), I’ll probably discover some shortcomings and enhance it.

Things that are on the roadmap are to provide support for integration with Spring, Java CDI and your own stuff.
Oh and write some wiki pages with documentation. Not the most fun stuff to write but how would you otherwise know how to use it.

Currently you can’t get it from the Central Maven repository yet but you can download it from sourceforge. If my own usage proves it’s allright for using it, I’ll perhaps upload it to Maven Central