{#def 
accent=False, 
async_result=False, 
autofocus=False, 
backdrop=False, 
backdrop_on_focus=False, 
blur_on_tab=True, 
cache=False, 
cancel_button=True, 
compression=False, 
correlative_template=False, 
debug=False, 
delay=300, 
display=[], 
dropdown_filter=False, 
dynamic=False, 
dynamic_filter=None, 
empty_template=None, 
filter=True, 
generate_on_load=None, 
group=False, 
group_order=None, 
group_template=None, 
highlight=True, 
hint=True, 
href=None, 
loading_animation=True, 
matcher=None,
max_item=8, 
max_item_per_group=None, 
max_length=None, 
min_length=2, 
multiselect=None, 
must_select_item=False, 
name="search", 
offset=False, 
order=None, 
placeholder=None, 
result_container=None, 
search_on_focus=False, 
source={}, 
submit_button=True, 
template=None, 
template_value=None, 
ttl=3600000, 
#}
{#css vendor/typeahead/jquery.typeahead.min.css #}
{#js vendor/jquery/jquery.min.js, vendor/typeahead/jquery.typeahead.min.js #}
<div class="typeahead__container">
  <div class="typeahead__field">
    <div class="typeahead__query">
      <input {{ attrs.render(autocomplete="off",
         autofocus=autofocus | tojson,
         class="js-typeahead",
         data_accent=accent | tojson,
         data_async_result=async_result | tojson,
         data_backdrop=backdrop | tojson,
         data_backdrop_on_focus=backdrop_on_focus | tojson,
         data_blur_on_tab=blur_on_tab | tojson,
         data_cache=cache | tojson,
         data_cancel_button=cancel_button | tojson,
         data_compression=compression | tojson,
         data_correlative_template=correlative_template | tojson,
         data_debug=debug | tojson,
         data_delay=delay,
         data_display=display | tojson,
         data_dropdown_filter=dropdown_filter | tojson,
         data_dynamic=dynamic | tojson,
         data_dynamic_filter=dynamic_filter | tojson,
         data_empty_template=empty_template | tojson,
         data_filter=filter | tojson,
         data_generate_on_load=generate_on_load | tojson,
         data_group=group | tojson,
         data_group_order=group_order | tojson,
         data_group_template=group_template | tojson,
         data_highlight=highlight | tojson,
         data_hint=hint | tojson,
         data_href=href,
         loading_animation=loading_animation | tojson,
         data_max_item=max_item,
         data_max_item_per_group=max_item_per_group,
         data_max_length=max_length,
         data_min_length=min_length,
         data_multiselect=multiselect | tojson,
         data_must_select_item=must_select_item | tojson,
         data_offset=offset | tojson,
         data_order=None,
         data_result_container=result_container,
         data_search_on_focus=search_on_focus | tojson,
         data_source=source | tojson,
         data_template=template,
         data_template_value=template_value,
         data_ttl=ttl,
         name=name,
         placeholder=placeholder or _('Search...') ,
        ) }}>
      </div>
      <div class="typeahead__button">
        {% if submit_button %}
          <button type="submit">
            <i class="fbi bi-search" aria-hidden="true"></i>
          </button>
        {% endif %}
      </div>
    </div>
  </div>
