Open the menu Skip to main content

Searchfield

To prepend a searchfield to the menu or to (some of) the panels, use the searchfield options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                searchfield: {
                    // searchfield options
                }
            }, {
                searchfield: {
                    // searchfield configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "searchfield" add-on

Option Datatype Default value Description
searchfield
{
add boolean false Whether or not to automatically prepend a searchfield to the menu or (some of the) panels.
addTo String HTMLElement[] "panels" Where to add the searchfield(s).
Possible values:
  • "panels" (prepends a searchfield to each panel)
  • "searchpanel" (prepends a searchfield to the searchpanel)
  • A valid query selector (prepends a searchfield to each panel that maches the selector)
To add a fixed searchfield to the menu, see the navbars add-on.
noResults String "No results found." The text to show when no results are found. If false no message will be shown.
placeholder String "Search" The placeholder text for the searchfield.
search Boolean true Whether or not to actually search the listitems.
searchIn String "panels" What panels to search in.
Possible values:
  • "panels" (searches in all panels)
  • A valid query selector (searches n all panels that maches the selector)
splash String HTML to show while there is no searchterm provided.
title String "Search" The title for the searchpanel.
}

Configuration for the "searchfield" add-on

Option Datatype Default value Description
searchfield
{
cancel boolean false Whether or not to add a cancel button after the searchfield.
clear boolean false Whether or not to add a clear button to the searchfield.
form Object null Adds the specified keys/values as attributes to the FORM.
input Object null Adds the specified keys/values as attributes to the INPUT.
panel Object null Adds the specified keys/values as attributes to the searchpanel.
submit boolean false Whether or not to add a submit button to the searchfield.
}

CSS variables for the "searchfield" add-on

The "searchfield" add-on has no CSS variables.

API methods for the "searchfield" add-on

The "searchfield" add-on has no API methods.