[SOLVED] Auto-suggest repeater showing up to 5 items when typing in the Search bar.

Ask the community
,
1

Hi Everyone,

I am trying to build a Search Bar with autosuggest.
I already have a repeater displaying my items with a search bar and 2 dropdown filters. This all works fine but I would like to add an autosuggest repeater showing when users type in the Search bar (input).
Ideally, that would be something as below:

431×526 41.5 KB

Here are my issues:

  1. When the repeater (for autosuggest) is Collapsed on Load, it doesn’t show up when I type something in the Search bar.
    NB: when not collapsed, the repeater works fine, displaying matching items as you type.

  2. I want to be able to click on the item and land on my item page (dynamic page, already existing)
    NB: I have tried with a table which solves this issue but issue N°1 is the same.

  3. Search results only match when words are in the very same order. It don’t understand as I’m using .contains.
    Example: If I search “Cool Sunny Holidays”, it won’t display an item called “Cool Holidays” (title) as results but will display something called “Not Cool Sunny Holidays” as the “Cool Sunny Holidays” match.

Here is my current code (just for this feature):

import wixData from ‘wix-data’;

export function iTitle_keyPress(event) {
filter($w(“#iTitle”).value);
}

function filter(title) {

$w(“#dataset2”).setFilter(wixData.filter()
.contains(“title”, title));
$w(“#repeater1”).expand

}

IDs of Elements:
Search Bar (input) = iTitle
Dataset on page = dataset2
Repeater for autosuggest = repeater1

Hope I was clear enough.

I would be really grateful if I could get advice on this!

Many thanks!

Corentin

2

Take the code below and modify it to suit the code on your own page. You can also swap and try using the show/hide option instead, plus you can always add a debounce timer function to the text too.

Collapse the element (e.g. table) in the onReady function:

$w.onReady(function () {
	$w("#table").collapse();
});

Add the keyPress event to the table…
And fill in the keyPress routine to toggle between expand and collapse:

 export function table_keyPress(event, $w) { 
 
	if($w("#table").collapsed) {
		$w("#table").expand();
	}
	else {
		$w("#table").collapse();
	}
}
3

Hi @givemeawhisky ,

many thanks for the quick reply!

I have tried your code but wix doesn’t allow to add keyPress events on tables or repeaters.

Do you know any work around to make it work?

Thanks!