Minimal Select Replacement For jQuery | minimalect

Minimalect is a simple and clean jQuery plugin that replaces the default HTML select elements with a nicer control.

Features:

  • Replace select elements with a nicer-styled control
  • Support for optgroups
  • Filtering choices by typing
  • Keyboard navigation
  • Support for themes
  • AJAX search support
  • Multiselect support
  • Detects dynamic changes to the original element automatically
  • Disabled element support
  • Public Methods
  • Optional reset functionality
  • Combobox functionality is now optional
  • Less conflict with existing form styles
  • Various bug fixes

How to make use of it:

1. Include the latest jQuery library and jQuery Minimalect in the header.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.minimalect.min.js"></script>

2. Include Minimalect CSS to style the elements of your choice.

<link href="jquery.minimalect.min.css" rel="stylesheet" type="text/css">

3. Create a selection box.

<select id="demo">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="scania">Scania</option>
</optgroup>
<optgroup label="Finnish Cars">
<option value="sisu">Sisu</option>
</optgroup>
<optgroup label="German Cars">
<option value="volkswagen">Volkswagen</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="opel">Opel</option>
<option value="porsche">Porsche</option>
</optgroup>
</select>

4. Call the plugin with options.

$(document).ready(function(){
$("#demo").minimalect({ 
theme: "bubble",
});
});

Read More – Select Box Replacement Vue Component Library | vue-select

Settings

  • theme — the currently used theme. Applied as a class to the main div element. Default: (empty)
  • transition — which effect should be used for showing and hiding the dropdown. Default: fade
  • transition_time — how long the effect for showing and hiding the dropdown should take, in milliseconds. Default: 150
  • remove_empty_option — whether options with empty values should be removed. Default: true
  • show_reset — whether to show a reset button to deselect a selected choice. Default: false
  • searchable — whether the combo box functionality is enabled or not. Default: true
  • ajax — URL of an AJAX resource for external search results. See above for details. Will not have an effect if searchable is false. Default: null
  • live — whether Minimalect should automatically detect value changes to the original select. Creates an interval that runs indefinitely every 100 ms; may interfere with the DOM inspector. Default: true
  • debug — whether Minimalect should explain in the console what it’s doing. Useful for debugging. Default: false

Messages

  • placeholder — the default text displayed whenever no choice has been selected. Set to null inherit the placeholder from the value of the first option. Default: Select a choice
  • empty — message displayed to the user when no choice matched his filter search term. Default: No results matched your keyword.
  • error — message displayed to the user when an AJAX request fails for any reason. Default: There was a problem with the request.

Classes

  • class_container — classname for the main div element. Default: minict_wrapper
  • class_group — classname for a list item that represents an optgroup label. Default: minict_group
  • class_empty — classname for the “No results” message when filtering produces no results. Default: minict_empty
  • class_active — classname that is applied to the main div element whenever the dropdown is visible. Default: active
  • class_disabled — classname that is applied to list items or the whole select, if they are disabled. Default: disabled
  • class_selected — classname applied to the list item in the dropdown that is currently selected. Default: selected
  • class_hidden — classname applied to list items in the dropdown that do not match the filter. Default: hidden
  • class_highlighted — classname applied to the list item that is currently highlighted when the user uses keyboard navigation. Default: highlighted
  • class_first — classname that corresponds to the first visible list item in the dropdown, including optgroup labels and the “No results” message. Helpful when rounding corners in CSS. Default: minict_first
  • class_last — classname that corresponds to the last visible list item in the dropdown, including optgroup labels and the “No results” message. Helpful when rounding corners in CSS. Default: minict_last
  • class_reset — classname applied to the optional reset element. Default: minict_reset

Callbacks

  • beforeinit — Called immediately when the plugin is called before any initialization work begins.
  • afterinit — Called after Minimalect has been fully initialized.
  • onchange — Called whenever the user selects an option in the list.
    • value; the value of the choice selected.
    • text; the user-facing text of the choice selected.
  • onopen — Called when the dropdown list is displayed.
  • onclose — Called when the dropdown list is closed (either by clicking away or by selecting an option).
  • onfilter — Called every time the list is filtered (basically every time the user types a letter into the filter box).
    • match; a boolean parameter, true if there were matches false if no matches are found.

Minimal Select Elements Replacement Plugin with jQuery, minimalect Github

Read More – 

Custom Select Box Replacement In Pure JS and CSS | Justselect
jQuery Select Plugin for Mobile (Android and iOS) with Feature


See Demo And Download

Official Website(groenroos): Click Here

This superior jQuery/javascript plugin is developed by groenroos. For extra advanced usage, please go to the official website.

Share