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 } )
        }
    })
}}
Fieldname Description
id Unique identifier for the element (CSS id).
name (optional) Form name for this field, id will be used when ommited.
label Label for the field.
placeholder Placeholder for the input field.
autocomplete "on" | "off" Allow autocomplete with previously entered inputs.
datalist Array of options of type object: { value: optionvalue , label: optionlabel }
Alternatively, the value can be ommited to generate options that only have a label.

admin