mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 01:25:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added highlighting to search results

Browse source
This commit is contained in:
Jan Böhmer 2024-02-29 22:20:30 +01:00
parent faadd8e9a4
commit e00988047c
2 changed files with 35 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

38
assets/controllers/elements/part_livesearch_controller.js
View file

@ -37,6 +37,19 @@ export default class extends Controller {
_autocomplete;
_highlight = (text, query) => {
if (!text) return text;
if (!query) return text;
const HIGHLIGHT_PRE_TAG = '__aa-highlight__'
const HIGHLIGHT_POST_TAG = '__/aa-highlight__'
const escaped = query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
const regex = new RegExp(escaped, 'gi');
return text.replace(regex, (match) => `${HIGHLIGHT_PRE_TAG}${match}${HIGHLIGHT_POST_TAG}`);
}
initialize() {
// The endpoint for searching parts
const base_url = this.element.dataset.autocomplete;
@ -97,13 +110,28 @@ export default class extends Controller {
getSources({ query }) {
return [
// The parts source
{
sourceId: 'parts',
getItems() {
const url = base_url.replace('__QUERY__', encodeURIComponent(query));
return fetch(url)
.then((response) => response.json());
const data = fetch(url)
.then((response) => response.json())
;
//Iterate over all fields besides the id and highlight them
const fields = ["name", "description", "category", "footprint"];
data.then((items) => {
items.forEach((item) => {
for (const field of fields) {
item[field] = that._highlight(item[field], query);
}
});
});
return data;
},
getItemUrl({ item }) {
return part_detail_uri_template.replace('__ID__', item.id);
@ -129,9 +157,9 @@ export default class extends Controller {
</b>
</div>
<div class="aa-ItemContentDescription">
${components.Snippet({hit: item, attribute: 'description'})}
${item.category ? html`<p class="m-0"><span class="fa-solid fa-tags fa-fw"></span>${item.category}</p>` : ""}
${item.footprint ? html`<p class="m-0"><span class="fa-solid fa-microchip fa-fw"></span>${item.footprint}</p>` : ""}
${components.Highlight({hit: item, attribute: 'description'})}
${item.category ? html`<p class="m-0"><span class="fa-solid fa-tags fa-fw"></span>${components.Highlight({hit: item, attribute: 'category'})}</p>` : ""}
${item.footprint ? html`<p class="m-0"><span class="fa-solid fa-microchip fa-fw"></span>${components.Highlight({hit: item, attribute: 'footprint'})}</p>` : ""}
</div>
</div>
</div>

3
assets/css/components/autocomplete_bootstrap_theme.css
View file

@ -629,9 +629,10 @@ body {
display: none;
}
.aa-ItemContent mark {
background: none;
background: var(--bs-highlight-bg);
color: var(--bs-body-color);
font-style: normal;
padding: 0;
font-weight: 700;
font-weight: var(--aa-font-weight-bold);
}