(SOLVED) Counting items repeater filtered

Hi.

I successfully find my 2 days problem by watching the tutorial from youtube about search and dropdown. it really excites me to have it now working. However, i would like to add some feature if possible. I want to add search find result counter [ i don’t know if thats the right term]. I attached screent shot from my google search where it count number of items based on my inquiry.

Scenario: Search mp3
Repeater result: Filtered
Count: No of items search (like in photo attached)

Here’s the code im using right now with search and dropdown.
I DIDN’T add yet any code for the search result counter.

Hope you anyone can guide me well what’s the code and WHERE to attached the code without affecting my codes below.

import wixData from “wix-data”;

$w.onReady(() => {
wixData.query(‘Category’)
.find()
.then(res => {
let options = [{“value”: ‘’, ‘label’: ‘All Tours’}];
options.push(…res.items.map(category => {
return {‘value’: category.title, ‘label’: category.title}
}));
$w(‘#iTours’).options = options;
})
});

let lastFilterTitle;
let lastFilterCategory;

let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterCategory);
}, 200);
}

function filter(title, category) {
if (lastFilterTitle !== title || lastFilterCategory !== category) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘title’, title);
if (category)
newFilter = newFilter.eq(‘category’, category);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterCategory = category;
}
}

export function iTours_change(event, $w) {
filter(lastFilterTitle, $w(‘#iTours’).value); //Add your code for this event here:
}

// adding countQuery search

THANK YOU!!

Hello
after you set the filler you can count the left items in the data set :

  let count = $w("#dataset1").getTotalCount(); 

you can read more here.

Massa

Hello Ms. Salah,

Thank you for your reply.
I’m really sorry if this looks spoon feeding but i really don’t have any idea what to do on the code you share.
I will just copy and paste it or do i need to add a trigger or something to count the total of titles filtered.
Do i also need to add a text box and tag the code with it?

Hope you can share me your knowledge so i can step by step learning to it.

thank you

Hello,
here how the code will look like with the count added:

 
import wixData from "wix-data";

$w.onReady(() => {
    wixData.query('Category')
    .find()
    .then(res => {
 let options = [{"value": '', 'label': 'All Tours'}];
        options.push(...res.items.map(category => {
 return {'value': category.title, 'label': category.title}
        }));
        $w('#iTours').options = options;
    })
});

let lastFilterTitle;
let lastFilterCategory;
let count; //declaring the variable to use it after
 
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if(debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w('#iTitle').value, lastFilterCategory);
    }, 200);
}

function filter(title, category) {
 if (lastFilterTitle !== title || lastFilterCategory !== category) {
 let newFilter = wixData.filter();
 if (title)
            newFilter = newFilter.contains('title', title);
 if (category)
            newFilter = newFilter.eq('category', category);
    $w('#dataset1').setFilter(newFilter);
    lastFilterTitle = title;
    lastFilterCategory = category;
    count = $w("#dataset1").getTotalCount(); // setting the count value 
    }
}

so now you have a variable (count) that holds the number of items in after applying the filter.

now if you want to show the count on a text box you will need to :

  • add a text box to show the count value on (let’s say the id is text1)

  • assign the count value to it: $w(‘#text1’).text = count ;

  • this line of code will be located after setting the count value:

count = $w("#dataset1").getTotalCount(); 
$w('#text1').text = count;

good luck!
Massa

Thank you Massa san for the fastest response.
Unfortunately the $w(’ #text1 ').text = count; is not working and receiving an SDK error, the text parameter that is passed to the text method cannot be set to the value 14. It must be of type string.

Am i missing anything?
I am thinking if this applicable to get the result of a repeater filtered.

Thank you so much

try the toString() method as follows:

  $w('#text1').text = count.toString(); 

Massa

Hello Ms. Salah,

I really appreciates your kind and fast response. The code is working but there’s a 1 step delay.

Delay like this.

I have all the item around 14 rows (items).

4 drop down options:

  • All Tours (14 items total)
  • Optional Tours (12 items)
  • Free and Easy (2 items)
  • Group Departure (0 items)

One default text box (successfully connected with the code #)

When the start of the page, the text box does not change to number 14 (show the default I’m a paragraph. Click here to add your own text and edit me. It’s easy. )
When i choose the Optional Tours option it will change to 14 (but opt tour is 12 only).
When i choose the Free and Easy it will change to 12 (but opt tour is 2 only).
When i choose the Group departure it will change to 2 (but grp dep is 0 only).

It’s like the result is delay for a 1 option.

What do you think is the reason of this? Here’s the console screen shot.
I choose ALL tours then change to group departure but counting got the ALL tours option.

Thank you

Hi !

i checked your website, your setting the count value before adding the filter so that’s why your getting the old filter’s count instead of the new one. first you should add the filter then count the items, try the following:

$w('#dataset1').setFilter(newFilter).then(() => {
      count = $w("#dataset1").getTotalCount();
      $w('#result').text = count.toString(); // setting the count value
})

Massa

Hello Ms Salah,

Thank you for the reply.
Yes its just my wild guess if i put it on top it will be a priority that’s why i change it (newbie) hehe.
BUT now, YES ITS REALLY WORKING!! .THEN(()=> { is the real hero. THANK YOU VERY MUCH. LETS keep this thread so others can easily get the codes. :slight_smile:

THANK YOU! THANK YOU!
GODBLESS

hello, we have the same problem… thank you for this but can i ask. what’s this for? the “value” and ‘label’ and all tours? is that from a dropdown? TIA


.

@vinxbsp Yes this is related on dropdowns…
https://www.wix.com/velo/reference/$w/dropdown/options

Please do not bump-up old post, in future.
Obsorve the community-guidelines and feel free to open your own post with your own issue, instead of bumping-up old ones.
If neccessary → you can link your post to an example (old) one.