Elements Design: Vector Icons Pack
JS Plugin: Dreamylitebox

JS Plugin: Select2 3.0


"Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library."


  1. <head>
  2. <linkhref="select2.css"rel="stylesheet"/>
  3. <scriptsrc="select2.js"></script>
  4. <script>
  5. $(document).ready(function(){ $("#e1").select2();});
  6. </script>
  7. </head>
  8. <body>
  9. <selectid="e1">
  10. <optionvalue="AL">Alabama</option>
  11. ...
  12. <optionvalue="WY">Wyoming</option>
  13. </select>
  14. </body>

Plugin: Select2 3.0

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:


Plugin: Select2 3.0

Loading Remote Data
Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:

  1. $("#e6").select2({
  2. placeholder:"Search for a movie",
  3. minimumInputLength:1,
  4. ajax:{// instead of writing the function to execute the request we use Select2's convenient helper
  5. url:"",
  6. dataType:'jsonp',
  7. data:function(term, page){
  8. return{
  9. q: term,// search term
  10. page_limit:10,
  11. apikey:"ju6z9mjyajq2djue3gbvv26t"// please do not use so this example keeps working
  12. };
  13. },
  14. results:function(data, page){// parse the results into the format expected by Select2.
  15. // since we are using custom formatting functions we do not need to alter remote JSON data
  16. return{results: data.movies};
  17. }
  18. },
  19. formatResult: movieFormatResult,// omitted for brevity, see the source of this page
  20. formatSelection: movieFormatSelection,// omitted for brevity, see the source of this page
  21. dropdownCssClass:"bigdrop"// apply css that makes the dropdown taller
  22. });

Plugin: Select2 3.0

and more various sample on site.


Tags: select, plugin, jquery, develop, css3, html5, design, layout

Leave a Comment

No Comment

© Creative3x Ltd.