Searchfield introduction

To prepend a searchfield to the menu or to (some of) the panels, include the "searchfield" add-on .js and .css files and use the searchfield options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.searchfield.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.searchfield.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            searchfield: {
               // searchfield options
            }
         });
      });
   </script>

By default, the searchfield will search in the data-mm-searchtext attribute on a listitem. If omitted, the searchfield will search in the text of a menu item.

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Prepend a searchfield to the menu.
  • Show all results in one panel.
  • Show sub-panels for a result.
  • Also search text-only menu items.
  • Add a clear-button.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "searchfield" add-on

Option Default value Datatype Description
searchfield A map of options or true for searchfield.add.
{
add false Boolean Whether or not to automatically prepend a searchfield to the menu or (some of the) panels.
addTo "panels" String Where to add the searchfield(s).
Possible values: "panels" and a valid jQuery selector.
To add a fixed searchfield to the menu, see the navbars add-on.
noResults "No results found." Boolean The text to show when no results are found. If false no message will be shown.
placeholder "Search" String The placeholder text in the searchfield.
resultsPanel A map of options or true for resultsPanel.add.
Note: Only works when adding a fixed searchfield to the menu with the navbars add-on.
{
add false Boolean Whether or not to add a new panel for showing all results. If false, results will be shown in their actual panel.
dividers true Boolean Whether or not to add a divider to divide the results per panel.
title "Search results" String The title above the results panel.
}
search true Boolean Whether or not to automatically search through the menu items while typing.
showSubPanels true Boolean Whether or not to show its sub-panels if a menu item matches the search.
showTextItems false Boolean Whether or not to show menu items without an anchor (an A element) in the results. If true, menu items with a SPAN elements will also be shown.
}

Configuration for the "searchfield" add-on

Option Default value Datatype Description
searchfield
{
clear false Boolean Whether or not to add a clear button to the searchfield.
form null Object Wraps the searchfield in a FORM element with the specified keys/values as attributes.
If omitted or false, the searchfield will be wrapped in a DIV
input null Object Adds the specified keys/values as attributes to the searchfield.
submit false Boolean Whether or not to add a submit button to the searchfield.
Requires the searchfield.form configuration option to be set.
}

API methods for the "searchfield" add-on

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

SCSS variables for the "searchfield" add-on

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

Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Section indexer