Modules

tw2.jqplugins.select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

For more information about select2, see: https://github.com/ivaynberg/select2

select2_spinner_img
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)

select2_sprite_img
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)

select2_js
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)

select2_css
  • location
    • Location on the page where the resource should be placed.This can be one of: head, headbottom, bodytop or bodybottom. None means the resource will not be injected, which is still useful, e.g. static images.
  • modname
    • Name of Python module that contains the file.
  • filename
    • Path to file, relative to module base.
  • no_inject
    • Don't inject this link. (Default: False)
  • whole_dir
    • Make the whole directory available. (Default: False)
  • media
    • Media tag

Select2SingleSelectField

SingleSelectField, enhanced with Select2 javascript

  • prompt_text
    • Text to prompt user to select an option.
  • placeholder
    • Placeholder text, prompting user for selection
  • no_results_text
    • Text shown when the search term returned no results
class DemoSelect2SingleSelectField(Select2SingleSelectField):
    options = [('Group 1', ['Item 1', 'Item 2']),
               ('Group 2', ['Item 3', 'Item 4', 'Item 5', 'Item 6'])]
    value = 'Item 2'
    attrs = dict(style='width: 200px')

<%namespace name="tw" module="tw2.core.mako_util"/>\
<select ${tw.attrs(attrs=w.attrs)}>
    % for group, options in w.grouped_options:
     % if group:
      <optgroup ${tw.attrs(attrs=dict(label=group))}>
     % endif 
        % for attrs, desc in options:
         <option ${tw.attrs(attrs=attrs)}>${desc}</option>
        % endfor
     % if group:
      </optgroup>
     % endif 
    % endfor
</select>

Select2MultipleSelectField

MultipleSelectField, enhanced with Select2 javascript

  • prompt_text
    • Text to prompt user to select an option.
  • item_validator
    • Validator that applies to each item
  • size
    • Number of visible options
  • placeholder
    • Placeholder text, prompting user for selection
  • no_results_text
    • Text shown when the search term returned no results
class DemoSelect2MultipleSelectField(Select2MultipleSelectField):
    options = [('Group 1', ['Item 1', 'Item 2']),
        ('Group 2', ['Item 3', 'Item 4', 'Item 5', 'Item 6'])]
    #value = ['Item 2', 'Item 5']
    placeholder = 'Select an item, you won\'t regret it'
    attrs = dict(style='width: 400px')

<%namespace name="tw" module="tw2.core.mako_util"/>\
<select ${tw.attrs(attrs=w.attrs)}>
    % for group, options in w.grouped_options:
     % if group:
      <optgroup ${tw.attrs(attrs=dict(label=group))}>
     % endif 
        % for attrs, desc in options:
         <option ${tw.attrs(attrs=attrs)}>${desc}</option>
        % endfor
     % if group:
      </optgroup>
     % endif 
    % endfor
</select>

Select2AjaxSingleSelectField
SingleSelectField that can get its values via ajax.
  • prompt_text
    • Text to prompt user to select an option.
  • placeholder
    • Placeholder text, prompting user for selection
  • no_results_text
    • Text shown when the search term returned no results
class DemoSelect2AjaxSingleSelectField(Select2AjaxSingleSelectField):
    options = []
    opts = dict(
        placeholder=dict(title="Search for a movie", id=""),
        minimumInputLength=2,
        ajax=dict(
            # instead of writing the function to execute the
            # request we use Select2's convenient helper
            url="http://api.rottentomatoes.com/api/public/v1.0/movies.json",
            dataType='jsonp',
            data=twc.js_callback(
                """
                function (term, page) {
                    return {
                        q: term, // search term
                        page_limit: 10,
                        apikey: "t9vrcwd64b6hvfct3xvad7xz"
                    };
                }
                """),
            results=twc.js_callback(
                """
                function (data, page) {
                    // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do
                    // not need to alter remote JSON data
                    return {results: data.movies};
                }
                """),
        ),
        formatSelection=twc.js_callback(
            """
            function (movie) {
                return movie.title;
            }
            """),
        formatResult=twc.js_callback(
            """
            function (movie) {
                var markup = "<table class='movie-result'><tr>";
                if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
                    markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
                }
                markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
                if (movie.critics_consensus !== undefined) {
                    markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
                }
                else if (movie.synopsis !== undefined) {
                    markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
                }
                markup += "</td></tr></table>"
                return markup;
            }
            """),
    )

<%namespace name="tw" module="tw2.core.mako_util"/>\
<input ${tw.attrs(attrs=w.attrs)}/>