Recent searches — slotted options
Server-rendered <material-option>s show before typing
(the "Recent" pattern) and filter client-side as you type. Trailing
avatar slot. Escape or the back arrow closes the view.
(no events)
JS items — sections, avatars, href navigation
The items property mixes contacts (auto-colored avatars)
with "Go to" entries carrying href — picking one clicks a
real light-DOM anchor (Unpoly-visible, up-target honored).
materialSelect is cancelable for full JS control.
(no events)
Remote source — src endpoint
Typing queries a mocked /demo-api/directory (400 ms
latency, server-side filtering, select2-style JSON accepted). Slotted
recents still show for the empty query. min-chars="2".
(no events)
Form-associated
Inside a <form>: Enter (or picking a text suggestion)
submits; the query posts as q=…. Reset restores the initial
value.
Forced full-screen view
layout="fullscreen" always opens the compact-window
overlay (with layout="auto" — the default — it switches on
viewport width < 600px; resize the window to try). Back arrow or
Escape restores the page.
RTL (hard-coded)
Section-local dir="rtl"; the header Direction toggle flips
the whole page instead.
Sample usage
<!-- Server-rendered recents; Enter posts q= via the surrounding form -->
<form action="/search/">
<material-search name="q" placeholder="Search mail" src="/api/search-suggest/" up-target="main">
<material-option leading-icon="history" data-section="Recent" value="invoices">invoices</material-option>
<material-avatar slot="trailing" name="Mikhail" size="s"></material-avatar>
</material-search>
</form>
<script>
// items from JS; href entries navigate (Unpoly-compatible anchor click)
document.querySelector('material-search').items = [
{ label: 'Anna Petersen', avatarName: 'Anna Petersen', section: 'Contacts', supportingText: 'anna@corp.io' },
{ label: 'Purchase orders', icon: 'shopping_cart', section: 'Go to', href: '/purchasing/' },
];
</script>