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"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <script src="path/to/jquery.mmenu.searchfield.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.searchfield.css" rel="stylesheet" />
   <script>
      $(document).ready(function() {
         $("#my-menu").mmenu({
            searchfield: {
               // searchfield options
            }
         });
      });
   </script>

Example

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

  • Prepend a fixed 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>
   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" (prepends a searchfield to each panel), "panel" (prepends a searchfield to the search panel) and a valid jQuery 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 "No results found." String The text to show when no results are found. If false no message will be shown.
placeholder "Search" String The placeholder text for the searchfield.
panel A map of options or true for panel.add. Only works when setting the addTo option to "panel" or adding a fixed searchfield to the menu with the navbars add-on.
{
add false Boolean Whether or not to add a search panel for showing the search 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.
fx "none" String The effect for opening and closing the search panel. Can be "none" (for no animation) or any effect in the effects extension. For example: "slide-right".
id null String The ID to add to the search panel.
splash null String HTML to show in the search panel before searching.
title "Search" String The title in the navbar for the search 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

Variable Default value Datatype Description
Include CSS
$mm_opt_searchfield true Boolean Whether or not to include CSS for the searchfield add-on throughout the entire CSS framework.
$mm_opt_searchfield_btn $mm_opt_searchfield Boolean Whether or not to include CSS for the clear and/or submit button(s) in the searchfield.
$mm_opt_searchfield_panel $mm_opt_searchfield Boolean Whether or not to include CSS for adding a searchfields to a panel.
$mm_opt_searchfield_searchpanel $mm_opt_searchfield Boolean Whether or not to include CSS for the searchfield search panel.
Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Section indexer