Efficient use of Twitter bootstrap Typeahead with VRaptor 3

Efficient use of Twitter bootstrap Typeahead with VRaptor 3

Hi again,

Something very popular that we found on Web projects, are forms to insert and send some information. With help of JS frameworks like jQuery, Prototype and other combined with powerful of CSS 3 and HTML5, this forms are getting better. Not long ago, the rich components was only for Desktop plataform. Actually the Web have many rich components, with more resources and accessibility than Desktop components.

With a good AJAX control, many JS frameworks allow implementations of useful components, like the most popular ‘auto-complete’. I’m know that have a billions of implementations of this component, and I’m believe that jQuery UI it’s most import. Ok, ok.ok! We have one more alternative..and an powerfull alternative, I’m saying of Typeahead function of Twitter Bootstrap.

This component simulate the idea of combo box, however the list of elements it’s made with HTML and CSS, and a most important, we have more events and options if compared with native HTML combo box.

This use it’s a very simple, basically you have an array of strings and user will go writing and term and the component show an list of elements that match with user term. But, this ‘array of strings’ are from where ??

At this moment appears our friend AJAX :). We can configure the typeahead component to match the user term with an remote list of data, and with jQuery help we be very fast:

Now, on Java side with VRaptor 3, we need create and simple Controller to return an JSON object for AJAX request. Again, it’s a very very simple:

Simple, not ?

Considerations

With few lines we’ve do a rich component using VRaptor as framework and solid bootstrap implementation like Twitter bootstrap. On this sample have few lines related an other logic, however the basic idea it’s show how ease it’s work with this component. Below an sample of result of this example:

Typeahead component

Typeahead component

References

http://twitter.github.com/bootstrap/javascript.html#typeahead

http://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example

https://gist.github.com/1866577

Blog Java
  • profit!

    Eu fiz um poquinho diferente no meu, mas com ajuda do Rails e do CoffeeScript:

    animal_search.typeahead {
    source: (query, process) ->
    $.get(“/animals/search/#{query}.json”, {}, (data) -> process(data) unless not data)
    }

    • carlosspohr

      Legal, esse código aí é interpretado direto pelo Ruby ou é o do CoffeeScript mesmo ?

      • tem uma gem (coffee-rails) que roda o compilador do coffeescript (que é escrito em coffeescript, logo, depois de compilado, ele é na verdade JS) e compila seus .js.coffee’s para js em tempo de execução ;)

        acho que essa gem é padrão agora, inclusive.