js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fuzzy search and icon

Browse Source
This commit is contained in:
Cory LaViska
2021-09-08 12:05:28 -04:00
parent f6ccd119e8
commit ca098eb171
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/plugins/search/search.css
View File

@@ -153,7 +153,7 @@ body.site-search-visible {
border-top: solid 1px rgb(var(--sl-color-neutral-200));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: var(--sl-spacing-small);
padding: var(--sl-spacing-x-small);
}
.site-search__footer small {

6
docs/assets/plugins/search/search.js
View File

@@ -59,7 +59,9 @@
placeholder="Search this site"
size="large"
clearable
></sl-input>
>
<sl-icon slot="prefix" name="search"></sl-icon>
</sl-input>
</header>
<div class="site-search__body">
<ul class="site-search__results"></ul>
@@ -219,7 +221,7 @@
await searchIndex;
const hasQuery = query.length > 0;
const matches = hasQuery ? searchIndex.search(query) : [];
const matches = hasQuery ? searchIndex.search(`${query}~2`) : [];
let hasResults = hasQuery && matches.length > 0;
siteSearch.classList.toggle('site-search--has-results', hasQuery && hasResults);