Form Search

Form search plugin with clearing value options.

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of form search
                    $('.js-form-search').each(function () {
                      new HSFormSearch($(this)).init()
                    });
                  });
                </script>

Example

Toggle icon

Use defaultIcon: "element"

Loading event

Use loading() method.

Drop menu

Use dropMenuElement

Methods

Parameters Description Default value
clearIcon An element that when clicked will clear the field. null
defaultIcon The element that will be the default instead clearIcon. null
loadingIcon The element that will be instead clearIcon and defaultIcon on loading. null
delay Animation delay. 300
dropMenuElement Drop menu element. null
dropMenuOffset Drop menu top offset. 0
activeClass Class which will be added when input search is active. null

Events

Name Description
clear Triggered when the field is cleared