How to show a short result from long paragraph? (repeater database search bar)

Ask the community
, ,
1

Question:
Hi everyone, I would like to make my database search bar’s result (long paragraph), to show a short highlighted result from the input text in search box.
I don’t know about coding, but I followed a coding tutorial to create this search bar.

Product:
Wix Editor (with Velo Dev mode)

What are you trying to achieve:
I want to make the search result (very long paragraph) to not showing the whole long paragraph from database, but showing and highlighting only the middle part of paragraph part. Just like what Google search engine do.

Example:

  • This is the long paragraph text in database:

“When I see your face, There’s not a thing that I would change, 'Cause you’re amazing, Just the way you are, And when you smile, The whole world stops and stares for a while, 'Cause girl, you’re amazing, Just the way you are.”

  • I search “Just the way you are” in search bar.
  • I would like it to show in the search bar result as:
    “Cause you’re amazing, Just the way you are , And when you smile …”

What have you already tried:
I tried to search in this forum and Google about this question, but there is 0 result. I’m not sure is it my description or search keyword wrong, I changed different keyword but still can’t find about this. I’m not sure what this “only showing and highlighting input text from long paragraph text” normally called. :smiling_face_with_tear:

This is the code of my current database search bar:

import wixData from 'wix-data';
$w.onReady(() => {
// Real-time search as the user types in the search bar.
$w("#SearchbarHome").onInput(() => {
performSearch();
});
});
function performSearch() {
const searchQuery = $w("#SearchbarHome").value.trim();
if (searchQuery.length > 0) {
// Apply the filter based on the search query
$w("#collectionDatasetName").setFilter(
wixData.filter()
.contains("title", searchQuery)
.or(wixData.filter().contains("title", searchQuery))
.or(wixData.filter().contains("title1", searchQuery))
.or(wixData.filter().contains("album", searchQuery))
.or(wixData.filter().contains("album1", searchQuery))
.or(wixData.filter().contains("artist", searchQuery))
.or(wixData.filter().contains("artist1", searchQuery))
.or(wixData.filter().contains("artist11", searchQuery))
.or(wixData.filter().contains("artist111", searchQuery))
.or(wixData.filter().contains("artist1111", searchQuery))
.or(wixData.filter().contains("lyrics", searchQuery))
)
.then(() => {
console.log("Dataset filtered");
// Automatically expand the repeater if there are items to display
updateRepeaterVisibility();
})
.catch((err) => {
console.error("Failed to filter dataset:", err);
$w("#repeaterSearch").collapse();
// Show the notFound element if there's an error
$w("#notFound").show();
});
} else {
// Clear the filter and collapse the repeater if search query is empty
$w("#collectionDatasetName").setFilter(wixData.filter())
.then(() => {
console.log("Filter cleared");
$w("#repeaterSearch").collapse();
// Hide the notFound element when the filter is cleared
$w("#notFound").hide();
})
.catch((err) => {
console.error("Failed to clear filter:", err);
$w("#repeaterSearch").collapse();
// Optionally, hide the notFound element if there's an error
$w("#notFound").hide();
});
}
}
function updateRepeaterVisibility() {
// Check if the dataset has items to display after filtering
$w("#collectionDatasetName").getItems(0, 1).then((results) => {
if (results.totalCount > 0) {
$w("#repeaterSearch").expand();
// Hide the notFound element when there are items to display
$w("#notFound").hide();
} else {
$w("#repeaterSearch").collapse();
// Show the notFound element when there are no items to display
$w("#notFound").show();
}
});
}

It will be very helpful if anyone could help me on this.
Thank you so much. :pray: