Summary
The overview-search is the most basic search in wescale. We use it in table overviews, in modals, in panel sections, etc. The general guidelines of the overview-search also apply to any other search in wescale. However, there are exceptions such as the TATS or the product-search. These searches are more complex and have their own guidelines. But unless otherwise specified, the general guidelines should always be used in first place.
General guidelines
- Default setup. If there is only one search on the respective page, it should be initially focused.
- Search as you type. After entering 2 characters the search starts. In languages where words can also be made up of a single character (e.g. Chinese, Korean, ...) the search is started as soon as the first character is entered.
- Cross-lingual. If you search for "germany", a possible search result would be "Deutschland" as well.
- AND-linked-infix. The more keywords you enter, the more accurate your search will be. As a result, the user gets fewer - but more precise - search hits.
- No WYSIWYG. For technical reasons, the fields are searched as they occur in the database. If "Paderborn" and "deutsch" are available in the database, the search for "born (d" would not find a hit, even if "Paderborn (de)" is displayed in the UI.
- Invisible fields. In addition to the visible fields, other relevant fields can also be searched in the background. Even if only the name "Juliane Becker" is displayed in the UI, the user could get a hit by searching for "jbecker@de.movisia.com".
- Clear search. Clicking on "" or will clear the search and trigger a new one.
- Scoped search. The search only affects the area in which it is located.
- Hits-indicator. All items on the page that display the number of hits, change them according to the search results. (If it is technically possible and if the loading times do not increase significantly by that)
- Min-width. As a rule of thumb, an input with a length of 27 characters covers 90% of the search queries. That's why we set a fixed width of 300px for search inputs.
- Placeholder. Since each search can potentially return several hits, the placeholder is always in plural. In addition, the placeholder always contains an hint of what is searched.
- Empty-state. If there are no search hits, we use
.wui-empty-state. You'll find the right image and further information at images
... in header (with filters)
<form class="display--inline-block wui-bs-form wui-bs-form--horizontal wui-bs-form--inline">
<div class="input-group">
<div class="form-control-group form-control-group--has-icon"><input
placeholder="Search for [entities]" class="form-control wui-scene-header__search-input">
<a class="form-control-icon"><span class="fa fa-search clickable"></span></a></div>
<div class="input-group-btn">
<button type="button" class="wui-btn wui-btn--default">
<i class="fa fa-filter"></i>
</button>
<button type="button" class="wui-btn wui-btn--default" disabled="disabled">
<i class="fa fa-eraser"></i>
</button>
</div>
</div>
</form>
... in panel-header
<div class="wui-bs-panel">
<div class="panel-heading">
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<form class="wui-bs-form wui-bs-form--inline">
<div class="input-group">
<div class="form-control-group form-control-group--has-icon"><input
placeholder="Search for [entities]" type="text" autocomplete="off"
class="wui-scene-header__search-input form-control"> <span
class="form-control-icon"><i class="fa fa-search"></i></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>