article:
Elements Design: Vector Icons Pack
article:
JS Plugin: Dreamylitebox

JS Plugin: Select2 3.0

Advertisement

"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."


Sample

  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:

$("#e9").select2();

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:"http://api.rottentomatoes.com/api/public/v1.0/movies.json",
  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.


documentation
source
download

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

Leave a Comment

No Comment

© Creative3x Ltd.