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.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.searchfield.min.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>
Dependencies:
  • Core (on-canvas).
Works great with:

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.

SCSS mixins for the "searchfield" add-on

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors_searchfield Include this mixin to create a custom color scheme for the "searchfield" add-on.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$backgroundColor $mm_dimmedTextColor 2 The background-color for the input field.
$textColor $mm_textColor 2 The color for text in the input field.
$dimmedTextColor $mm_dimmedTextColor 2 The color for the "no results" text.
)

Next add-on:
Section indexer