httemplate/elements/selectize/select-multiple-pkg_class.html

   1 <%doc>
   2
   3     Render a Selectize.js multiple-select to choose from
   4     package classes
   5
   6     Selectize js and css must be included in the page header.
   7     Use the include_selectize option on header.html
   8
   9
  10     Parameters:
  11     * id          - id of the <select> element
  12     * name        - name of the <select> element
  13     * onchange    - name of a javascript function
  14     * placeholder - Text displayed when no options are selected
  15
  16 </%doc>
  17 <label for="<% $opt{id} %>" class="selectize-label">Package Classes</label>
  18 <select id="<% $opt{id} %>" multiple placeholder="<% $opt{placeholder} %>">
  19   <option value="">(none)</option>
  20 % for my $pkg_class ( @pkg_class ) {
  21   <option value="<% $pkg_class->classnum %>"><% $pkg_class->classname %></option>
  22 % }
  23 </select>
  24 <script>
  25   $('#<% $opt{id} %>').selectize({
  26       plugins:          ['remove_button'],
  27       sortField:        'text',
  28       create:           false,
  29       highlight:        true,
  30       allowEmptyOption: true,
  31       <% $opt{onchange} ? "onChange: $opt{onchange}," : '' %>
  32   });
  33 </script>
  34
  35 <%init>
  36
  37 my %opt = (
  38     id          => 'selectize-pkg_class',
  39     name        => 'selectize_pkg_class',
  40     placeholder => 'Filter Package Classes',
  41     @_
  42 );
  43
  44 my @pkg_class = qsearch( pkg_class => { disabled => '' } );
  45
  46 </%init>