.. _solid-form-search:
solid-form-search
=================

Allows you to filter the contents of a component that uses the ``filter-mixin`` such as ``solid-display`` or ``solid-map``.
This must have a ``filtered-by`` attribute set to the id of the current ``solid-form-search``.

.. code:: html

   <solid-form-search
      id="my-filter"
      fields="email"
      label-email="search by email"
   ></solid-form-search>

   <solid-display
      data-src="http://server/users"
      fields="username, last_name, email"
      filtered-by="my-filter"
   ></solid-display>


Mixins
------

This component uses the following mixins:

   * :ref:`widget-mixin <widget-mixin>`

Please check their documentation to know more about their capabilities.

Attributes
----------

``fields``
~~~~~~~~~~
   List of fields used to perform the search.

.. _label-field-sfs:
``label-[field]``
~~~~~~~~~~~~~~~~~
   When displaying a form, the default labels are the fields names of the model.
   If you want something fancier, you can set this attribute.
   i.e. ``label-username="Your name"``

.. _submit-button-sfs:
``submit-button``
~~~~~~~~~~~~~~~~~
   *Available from version 0.13*

   Text of the submit button to create in the search form. If the attribute is not defined,
   no button will be added and the form will trigger the search on change.

.. _class-submit-button-sfs:
``class-submit-button``
~~~~~~~~~~~~~~~~~~~~~~~
   Define the ``class`` of the ``div`` containing the submit button.
   
.. _range-field-sfs:
``range-[field]``
~~~~~~~~~~~~~~~~~
   URL of a container which list the accepted values
   for the field ``[field]``. It’s particularly useful with a dropdown or multipleselect
   field.

.. _enum-field-sfs:
``enum-[field]``
~~~~~~~~~~~~~~~~
   *Available from version 0.13*

   List of values of your choice for the field ``[field]``. 
   They have to be filled manually and must be separated by commas. 
   It’s particularly useful with a dropdown or radio field.

   Two formats are possible:
      * ``enum-[field]="value1, value2, value3"`` : each value will be displayed 
      and loaded in value attribute
      
      * ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed 
      and "a", "b", "c" will be loaded in value attribute.

.. _start-value-field:
``start-value-[field]``
~~~~~~~~~~~~~~~~~~~~~~~
   *Available from version 0.15*

   Allows to define the value of the first ``<input>`` to filter data.
   Only usable with ``solid-form-rangedate`` and ``solid-form-rangenumber``.
   In ``solid-form-rangedate``, it can be defined to ``today``.

.. _end-value-field:
``end-value-[field]``
~~~~~~~~~~~~~~~~~~~~~
   *Available from version 0.15*

   Allows to define the value of the second ``<input>`` to filter data.
   Only usable with ``solid-form-rangedate`` and ``solid-form-rangenumber``.
   In ``solid-form-rangedate``, it can be defined to ``today``.

.. _autocomplete-field-sfs:
``autocomplete-[field]``
~~~~~~~~~~~~~~~~~~~~~~~~
   *Available from version 0.15*

   Equal to the value ``off``, it cancels the automatic entry of values in the relevant ``[field]``.
   It can be added to ``inputs``, ``textarea`` and ``select``.

.. _search-placeholder-field:
``search-placeholder-[field]``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   *Available from version 0.17*

   Allows to modify "searchPlaceholder" displayed in the search bar (from SlimSelect plugin).
   Its value by default is "Search" in English, "Rechercher" in French.
   **It works only with the ``autocompletion`` feature.**

.. _search-text-field:
``search-text-[field]``
~~~~~~~~~~~~~~~~~~~~~~~
   *Available from version 0.17*

   Allows to modify "searchText" displayed when no value is found (from SlimSelect plugin).
   Its value by default is "No result" in English, "Aucun résultat" in French.
   **It works only with the ``autocompletion`` feature.**

   .. code:: html

      <solid-form-search
         id="filter-multiselectautocomp"
         fields="skills"
         widget-skills="solid-form-multipleselect-autocompletion-placeholder"
         placeholder-skills="Please, pick a value"
         search-text-skills="Nothing found"
         search-placeholder-skills="Searching..."
      ></solid-form-search>
      <solid-display
         data-src="data/list/users.jsonld"
         fields="username, skills"
         multiple-skills
         filtered-by="filter-multiselectautocomp"
      ></solid-display>


.. _auto-range-field:
``auto-range-[field]``
~~~~~~~~~~~~~~~~~~~~~~~
   *Available from version 0.17*

   Dynamically populates a dropdown based on the values of the ``solid-display``(s) associated.
   For each ``solid-display``, it will look for its ``field`` values, and add them to the dropdown.
   Each value is displayed only once.
   ``field`` can target a ``container`` or a ``resource``.

   In this example below, ``auto-range-skills ``attribute catches all skill values for all users in the ``data-src`` `data/list/users` and displays in the dropdown all skills once :
   .. code:: html

      <solid-form-search
         id="filter-autorange"
         fields="skills"
         auto-range-skills
      ></solid-form-search>
      <solid-display
         data-src="data/list/users.jsonld"
         fields="username, skills"
         multiple-skills
         filtered-by="filter-autorange"
      ></solid-display>


Widgets
-------
By default, the widget used is ``<solid-form-label-text>``. Cf the 
:ref:`Widget <reference>` page for more info.


Events
-------

``formChange``
~~~~~~~~~~~~~~
   Triggered when the form values change