====== Search widget ======

The Nuropa search widget is designed to present DokuWiki’s own search functionality in a user-friendly way.

Because the DokuWiki search functionality is actually pretty good at its job, it should also present this function to take a central role in your wiki’s user interface.

For this reason, the search field that you see on top of this page is actually only the “inactive state” of this widget. The moment you click into the search field, the user interface will change into a new “search state”, which looks as follows:

<figure border box>{{:components:searchbar:searchbar-searchfield.png?700|Nuropa Searchfield active}}<figcaption>The search field when activated</figcaption></figure>

In addition, the entire rest of the page gets “out of focus” and slightly dimmed down, indicating that the user should now focus on the search function.

Of course, the user can always click in the background (or press the Escape key) to return to the normal state. The background also stays scrollable so that information from the current page remains accessible, even when it is in this state.

Also, cancelling out of the search mode and then returning to is (e.g. to copy some text) will not discard any information in the search field.

===== Quick results =====

Similarly to the DokuWiki default template, the Nuropa template also supports a “quick results” list, which pops up below the search field and shows results already while the user is typing the search term:

<figure border box>{{:components:searchbar:nuropa-search-results.png?500|Nuropa Quick Search Results}}<figcaption>Quick-search results</figcaption></figure>

In most cases, users will actually find relevant results already in this popup, without a need to go through the actual search.

===== Mobile view =====

On smaller screens (e.g. tablets), a labelled search button is shown:

<figure border box>{{:components:searchbar:searchbar-tablet.png?400|Nuropa Searchbar on tablet screen sizes}}<figcaption>The searchbar on a typical tablet screen size</figcaption></figure>

On even smaller screens (e.g. smartphones), even the label is hidden:

<figure border box>{{:components:searchbar:searchbar-phone.png?275|Nuropa Searchbar on smartphone screen sizes}}<figcaption>The searchbar on a typical phone screen size</figcaption></figure>

The search button will join its space with the [[components:searchbar:tool|searchbar tool]], see there for more information. However, its functionality is the same as for the visible search field, and clicking on this button will simply open the search popup as described above.

===== See also =====

  * [[components:searchbar:tool|Searchbar tool]]