Need advice, how to truncate and highlight search results

Ask us anything
1

Hey there,
me again.

I made now many things running, thanks for everyone who helped. :sparkling_heart:
Now i am facing a problem where i really need some advice.

I am building a free to use app where shop owners can advertise their products by adding csv files.
So far so good and no problem, just struggeling with the search in some points.

Basically i want users when the type a term in the search input, that the result is truncate and the terms are highlighted.

For example:
User is searching for “Samsung Galaxy S24 64GB Box good and useful” (For now only type samsung if you want to check"

Lets say i will have two results, which will be (Just something stupid :slight_smile:):

  1. Samsung Galaxy S24 - 64GB - Black - 24" - Has many other things that are so good and usefull
  2. Samsung Galaxy S24 - 32GB - White - 22" - Comes with really nothing - no Box
    Screenshot 2024-02-07 173206

So what i actually want to achieve is to show this user following results:

  1. Samsung Galaxy S24 - 64GB - Black - 24" … good and usefull
  2. Samsung Galaxy S24 - 32GB - White - 22" - … no Box

Hope you know what i mean

I am using XANO and mostly i can help myself out.
Just how and where i can/should do the truncate and highlight?
As well some information or links, whatever, that can help me leading to the right direction.
I would appreciate any help. :pray:

I just published the latest version for better understanding.
Just make sure your screen width is > 1024px, things still in progress. :slight_smile:
https://117f4738-1d28-4e96-a2d9-a8ffd31c5b47.weweb-preview.io/en/

As well if you dont mind to send me a screenshot of how the site is formated on your end with your screen resolution, i would as well appreciate. :slight_smile:

Many thanks

2

Hi,
I just went briefly through your site and I think you should change your approach to the search engine. I can see that you are loading all the data from Xano but your search sends GET request to Xano after each letter entered in the search input. When your site will go live this can kill your backend.
I can see two different approaches to that:

  1. Filter already fetched collection on front - it is already there there is no need to call Xano on each letter of search. Maybe consider “light” version of a collection just for search purposes (I’m using this method) only with id, and a description. And it will be much quicker.
  2. Add search button and cal Xano after clicking the button - this is less elegant as you will not have “real-time” search results.

Maybe someone have other ideas on this.

And try to make the background picture smaller :wink:

3

Hi and thanks @Dominic

that one i actually i did ony for testing to get some results to make the designing part, but you are right thats not the best. Anyway its a good point.
Because i need to fetch in between while typing to get some info from the databaase like you mentioned “real-time”.
I am already indexing the database in xano for the product title.

How abaout if a user is typing it will not fetch anything but when he stops typing for a time x, it will fetch and show the possible result. would save some calls at least.

And yeah the background will be optional, didnt put yet the settings :slight_smile:
Basicallly everyone can turn it off or on.