mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
334c99f968
This commit updates the search results to query for the content as well as a snippet of the content for display when it's the content that matches the query rather than any of the headers. PR Close #57298
89 lines
3.2 KiB
HTML
89 lines
3.2 KiB
HTML
<dialog #searchDialog>
|
|
<div class="docs-search-container" (docsClickOutside)="closeSearchDialog()">
|
|
<docs-text-field
|
|
[autofocus]="true"
|
|
[hideIcon]="true"
|
|
[ngModel]="searchQuery()"
|
|
(ngModelChange)="updateSearchQuery($event)"
|
|
class="docs-search-input"
|
|
placeholder="Search docs"
|
|
></docs-text-field>
|
|
|
|
@if (searchResults() && searchResults()!.length > 0) {
|
|
<ul class="docs-search-results docs-mini-scroll-track">
|
|
@for (result of searchResults(); track result.objectID) {
|
|
<li docsSearchItem [item]="result">
|
|
<a
|
|
[routerLink]="'/' + result.url | relativeLink: 'pathname'"
|
|
[fragment]="result.url | relativeLink: 'hash'"
|
|
>
|
|
<div>
|
|
<div class="docs-result-icon-and-type">
|
|
<!-- Icon -->
|
|
<span class="docs-search-result-icon" aria-hidden="true">
|
|
<i role="presentation" class="material-symbols-outlined docs-icon-small">
|
|
{{ result.hierarchy.lvl0 === 'Tutorials' ? 'code' : 'description'}}
|
|
</i>
|
|
</span>
|
|
<!-- Results type -->
|
|
<span class="docs-search-results__type">
|
|
@let snippet = result._snippetResult.hierarchy?.lvl1?.value ?? '';
|
|
<ng-container
|
|
[ngTemplateOutlet]="highlightSnippet"
|
|
[ngTemplateOutletContext]="{snippet}"
|
|
></ng-container>
|
|
</span>
|
|
</div>
|
|
|
|
@let content = result._snippetResult.content;
|
|
@let hierarchy = result._snippetResult.hierarchy;
|
|
@if (content || hierarchy?.lvl2 || hierarchy?.lvl3 || hierarchy?.lvl4) {
|
|
<span class="docs-search-results__type docs-search-results__lvl2">
|
|
@let snippet = getBestSnippetForMatch(result);
|
|
<ng-container
|
|
[ngTemplateOutlet]="highlightSnippet"
|
|
[ngTemplateOutletContext]="{snippet}"
|
|
></ng-container>
|
|
</span>
|
|
}
|
|
</div>
|
|
|
|
<!-- Page title -->
|
|
<span class="docs-result-page-title">{{ result.hierarchy?.lvl0 }}</span>
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
} @else {
|
|
<div class="docs-search-results docs-mini-scroll-track">
|
|
@if (searchResults() === undefined) {
|
|
<div class="docs-search-results__start-typing">
|
|
<span>Start typing to see results</span>
|
|
</div>
|
|
} @else if (searchResults()?.length === 0) {
|
|
<div class="docs-search-results__no-results">
|
|
<span>No results found</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div class="docs-algolia">
|
|
<span>Search by</span>
|
|
<a href="https://www.algolia.com/developers/" target="_blank" rel="noopener">
|
|
<docs-algolia-icon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<ng-template #highlightSnippet let-snippet="snippet">
|
|
@let parts = splitMarkedText(snippet);
|
|
@for (part of parts; track $index) {
|
|
@if (part.highlight) {
|
|
<mark>{{part.text}}</mark>
|
|
} @else {
|
|
<span>{{part.text}}</span>
|
|
}
|
|
}
|
|
</ng-template>
|