How to hide a repeater b4 type in the seach bar?

Ask the community
,
1

Hi everyone,
I have done a seach bar on a page, but I want to:

  1. Hide all contains of repeater ( only show the search bar ) before someone type in the search bar.
  2. If I move the search bar to the header, how to let it work?
    What’s the code for these?

Any help will be appreciated , as I have gone through the help articles, but could not find a way.

1422×663 206 KB

2

Set the repeater to hidden on load in its properties panel, then place

$w('#repeater').show()

in your keyPress function.

3

Many thanks! David. It works!!! How to hide it again if delete the input in search bar?

4

@zingnz Try this:

function searchStatus() {
    if ($w('#input1').value === null || $w('#input1').value === '') {
        $w('#repeater').hide();
    } else {$w('#repeater').show();}
}

Then you can call the searchStatus() function in your bar’s keypress, focus, blur, etc.

5

@skmedia Thank u for quick reply!!! Did I do something wrong? when delete input in search bar, repearter still shows.

import wixData from ‘wix-data’;

$w.onReady( function () {
//TODO: write your page related code here…

});

export function input1_keyPress_1(event) {
$w(‘#repeater1’).show();
function searchStatus() {
if ($w(‘#input1’).value === null || $w(‘#input1’).value === ‘’) {
$w(‘#repeater1’).hide();
} else {$w(‘#repeater1’).show();}
}
let SearchValue = $w(“#input1”).value;
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘name’, SearchValue));
}

6

@zingnz Yes, searchStatus() is a new function we’ve declared, so 1. you can’t declare it within another function like you have, and 2. it’s never being called.

Try it like this:

import wixData from 'wix-data';

export function input1_keyPress_1(event) {
    let SearchValue = $w("#input1").value;             
    $w('#dataset1').setFilter(wixData.filter().contains('name', SearchValue))
    .then(searchStatus());
}

function searchStatus() {
    if ($w('#input1').value === null || $w('#input1').value === '') {
        $w('#repeater').hide();
    } else {$w('#repeater').show();}
}
7

@skmedia looks like this in my site.

1168×396 23.9 KB

8

@zingnz that’s because of Wix Forum’s bad hashtag system, just delete the duplicated hashtags and it’ll work. Mind the apostrophes too.

9

@skmedia Thanks heaps!!! It works perfectly!

10

@zingnz Good to hear!

11

@skmedia I just found still need one more Backspace or one more invalid inputs to hide repeater when I delete inputs, even there is no space character in search bar.

12

@skmedia And how to let search bar work if attach to the header? Many thanks!!!

13

@zingnz https://www.youtube.com/watch?v=ZiKcx2nlrkw
https://www.wix.com/code/home/example/Search(look at the debounceTimer)