Search menu
Search menu creates keyboard accessible popover with search input field and list of recent searches (if any). Users can type in search terms or select any of the recent searches either by mouse or using keyboard Up/Down arrows.
Recent searches list do not display any duplicate searches. Recent searches list is stored in sessionStorage as 'tsRecentSearches', it is removed from browser memory when page is closed.
This component can be of course adjusted to store recent searches in Tangora list or can be moved from sessionStorage to localStorage so the list is permanent.
Search results are displayed directly within component popup window.
| Example | Code |
|---|---|
<as-search-menu method="post" action="action=search&searchmethod=0&search=" placeholder="Search site for..." keys="Meta+U"></as-search-menu> |
| Property name | Description | Type |
|---|---|---|
| action |
Required:
defines actual action link to perform search. Must include URL param for search term at the end of the string. Link must be an actual page that can perform search. Example: action=search&searchmethod=0&search=
|
string |
| search-page-id | Required: defines search page ID | string |
| method | Optional: defines form method, defaults to post. | string |
| keys | Optional: Define keyboard shortcut to open command menu dialog. Can be any combination, though safest is using Meta key + another key. Meta is Command or Windows or any other meta modifier key (e.g. on Chromebooks), defaults to 'Meta+U' | string |
| placeholder | Optional: defines form method, defaults to post. | string |
| nohits | Optional: defines text for when typing the search term does not return any recent search, defaults to No recent search queries matches... | string |
| hint | Optional: defines text shown when typing the search term does not return any recent search, defaults to Search tips: some search terms require an exact match. Try typing the entire sentence, or use a different word or phrase. | string |
| navigate | Optional: defines text shown in footer for the first info icon, defaults to Navigate. | string |
| enter | Optional: defines text shown in footer for the second info icon, defaults to Select. | string |
| dismiss | Optional: defines text shown in footer for the third info icon, defaults to Dismiss. | string |
| drag | Optional: defines text shown in footer for the fourth info icon, defaults to Hold & drag. | string |