Select2 Demo

by newblt123

HTML

<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<select class="select optional" id="icon_select" name="privilege[icon]" style="width: 150px;"><option value="fa-glass">&amp;#xf000; fa-glass</option>
                    <option value="fa-music">&amp;#xf001; fa-music</option>
                    <option value="fa-search">&amp;#xf002; fa-search</option>
                    <option value="fa-envelope-o">&amp;#xf003; fa-envelope-o</option>
                    <option value="fa-heart">&amp;#xf004; fa-heart</option>
                    <option value="fa-star">&amp;#xf006; fa-star</option>
                    <option value="fa-user">&amp;#xf007; fa-user</option>
                    <option value="fa-film">&amp;#xf008; fa-film</option>
                    <option value="fa-th-large">&amp;#xf009; fa-th-large</option>
                    <option value="fa-th">&amp;#xf00a; fa-th</option>
                    <option value="fa-th-list">&amp;#xf00b; fa-th-list</option>
                    <option value="fa-check">&amp;#xf00c; fa-check</option>
                    <option value="fa-times">&amp;#xf00d; fa-times</option>
                    <option value="fa-search-plus">&amp;#xf00e; fa-search-plus</option>
                    <option value="fa-search-minus">&amp;#xf010; fa-search-minus</option>
                    <option value="fa-power-off">&amp;#xf011; fa-power-off</option>
                    <option value="fa-signal">&amp;#xf012; fa-signal</option>
                    <option value="fa-cog">&amp;#xf013; fa-cog</option>
                    <option value="fa-trash-o">&amp;#xf014; fa-trash-o</option>
                    <option value="fa-home">&amp;#xf015;...

JavaScript

function format(state) {
  return "<div style='font-family: FontAwesome, arial'>" + state.text + "</i>";
}

$(document).ready(function() { 
  $("#icon_select").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
  }); 
});