Search Component
Contributed by Harrison
Search component is an input component that can provide users to type words in the search bar and then by clicking the search button, user can get the corresponding results.
Basic Search Component
This is the most basic search component.
Code Usage
Usability
Put Search Component in the appropriate place
If people set a search box in the upper-right or upper-center region of your layout, they can be sure that users will locate it there because users expect it will be placed there.
Make Search Component simple
Simple search box is more usable and obvious for users. Advanced search box will make users confused.
Appropriate Serach Component Size
As a general guideline, keep text input to 27 characters or less (this would accommodate 90% of enquiries). Nielsen Norman (opens in a new tab)
Autocomplete And Suggestions
Provide suggestions for user searching, so that users have a better experience and reduce the occurrence of input errors and reduce the time searching for the same things.
Hint for the search component
Using the placeholder attribute can give users a clearer understanding of what to do to avoid making mistakes.
Accessibility
Keyboard Interaction
Let the users submit search by using enter on the keyboard or clicking the search
button. The Tab key on a keyboard should allow users to move between the search
box and other areas.
Keyboard Shortcut
Allowing users to use shortcuts to achieve their goals can improve the user experience
and enable them to search using keyboard shortcuts, improving website accessibility.
For the code, we can press CTRL and K simultaneously to trigger the focus function.
We can see that the border change the color to purple and we can directly type
words in the search bar.
Code Usage
Identify The Purpose Of Search Component
The text input field should have a label identifying its functionality. By adding these aria-label characteristics, we may improve accessibility by giving these crucial page elements clear, illuminating labels. They make sure that visitors, especially those who use screen readers, can more easily comprehend the elements and their purposes, promoting simpler interaction and navigation on the website.
Version
| Version | Editor | Author | Date | Description |
|---|---|---|---|---|
| v1.0 | Hsiangwen Cheng | Hsiangwen Cheng | 22.09.2023 | version 1 |
Search Attributes
Here is a table describing some common attributes for the HTML search component.
| Attribute | Description |
|---|---|
| list | The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. |
| maxlength | The maximum string length (measured in UTF-16 code units) that the user can enter into the search field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the search field has no maximum length. This value must also be greater than or equal to the value of minlength. |
| minlength | The minimum string length (measured in UTF-16 code units) that the user can enter into the search field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the search input has no minimum length. |
| pattern | The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text. |
| placeholder | The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds. |
| readonly | A Boolean attribute which, if present, means this field cannot be edited by the user. Its value can, however, still be changed by JavaScript code directly setting the HTMLInputElement value property. |
| size | The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use). |
| spellcheck | spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of spellcheck on <input> elements. |