Filter Datalist Template

Learn

January 26, 2022

The filter datalist component is a filter component that can help you create quick, fast but static javascript search options. It takes a datalist options array that is rendered to the browsers backend for the search values. On the frontend it will look similar to a Select2 dropdown field, but it does not use an external library, nor does it require calls to the backend.

It can be used when the number of options is relatively small, having hundreds of entries is ill advised.


{%- import 'components/filters/filter-datalist_template.twig' as DatalistTemplate -%}
{{ 
    DatalistTemplate.render( {
        id: 'postname',
        label: 'Postname',
        placeholder: 'Enter a postname',
        autocomplete: 'off',
        datalist: {
            'options': tb.get_posts( {'post_type' : 'post', } )|map( v => { value: v.post_title, label : v.post_content|striptags } )
        }
    })
}}
FieldnameDescription
idUnique identifier for the element (CSS id).
name (optional)Form name for this field, id will be used when ommited.
labelLabel for the field.
placeholderPlaceholder for the input field.
autocomplete"on" | "off" Allow autocomplete with previously entered inputs.
datalistArray of options of type object: { value: optionvalue , label: optionlabel }
Alternatively, the value can be ommited to generate options that only have a label.

admin