Navigation / Find a document
Search
Jump to the right item without losing your place in the current document.
Basic usage
Search the components on this site. / to focus the search field.
HTML
<label>Search components
<input type="search" class="input" data-dd-search placeholder="e.g. Chip / table / code" aria-label="Search components" autocomplete="off" data-dd-enhance hidden>
</label>
<div class="search-results" data-dd-search-results hidden></div>
<p class="note">Search the components on this site. <kbd>/</kbd> to focus the search field.</p>Provide a search index
JavaScript
window.ddSearchIndex = [
{ name: "Chip", href: "../chip/", where: "Lists & data", body: "Classification labels" },
{ name: "Table", href: "../table/", where: "Lists & data", body: "Comparable rows" }
];Classes & attributes
| Class / attribute | Purpose |
|---|---|
data-dd-search | The search input. Use one per page. |
.search-results / data-dd-search-results | The results container, initially hidden. |
window.ddSearchIndex | An array of objects with name, href, where, and body fields. |
window.ddSearch(query) | An optional custom provider returning an array. |
Usage notes
Generate the index alongside the HTML. Keep a linked directory available for readers who do not use search.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.