Single dropdown filters a repeater

Ask the community
,
1

I know I’m missing something. What I want should be be really simple.

One drop down with four options. The drop down makes one of the four answers show up. Simple?

This is the page: https://www.surroundins.com/How-it-works/scenarios

2

@melindarainsberger It would be helpful if you could share more information about how things are set up. Is the repeater tied to a dataset? If so, is there a field in that dataset (collection) that should be filtered on the value of the dropdown selection? How are you populating the dropdown?

3

Sure thing! I’ve tried a bunch of different routes so I don’t think posting the code will be helpful. Theres

  1. a drop down.
  2. a repeater tied to a dataset.
  3. the drop label and value are manually entered.

I’ve tried working with two different videos. But both also have a search input or a second dropdown that I don’t need.

https://www.youtube.com/watch?v=mTRSPNosLRw
https://www.youtube.com/watch?v=r0DLqkRDJ34&t=787s

4

Using the setFilter command ought to handle this task? What is the name of the field that you are filtering on?

5

Without being able to see your code it’s pretty much just guesswork.

6

I’ve used both in the video. I basically ripped out and came here. Which one should I try? Both are kinda wrong because I don’t have the text input.

7

Here’s the code from the first example, with as little changed as possible.

I know that anything referring to keyPress or #iTitle isn’t needed because I don’t have a text input. But if I take it out it breaks. And regardless it doesn’t work.

I don’t care what I have to name the drop down, dd lable, dd field, repeater, database, and the fields in the database. I just need the code to do it and I think this is not quite it.

import wixData from "wix-data";

$w.onReady(() => {
  loadContinents();
});

let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterContinent);  
  }, 500);
}

export function iContinent_change(event, $w) {
    filter(lastFilterTitle, $w('#iContinent').value);
}

function filter(title, continent) {
 if (lastFilterTitle !== title || lastFilterContinent !== continent) {
 let newFilter = wixData.filter();
 if (title)
      newFilter = newFilter.contains('articleTitle', title);
 if (continent)
      newFilter = newFilter.contains('continent', continent);
    $w('#ScenarioData').setFilter(newFilter);       
    lastFilterTitle = title; 
    lastFilterContinent = continent;
  }
}

function loadContinents() {
  wixData.query('Continents')
      .find()
      .then(res => {
 let options = [{"value": '', "label": 'All Continents'}];
        options.push(...res.items.map(continent => {
 return {"value": continent.text, "label": continent.text};
        }));
        $w('#iContinent').options = options;
      });

}
8

And now I’ve done exactly the example and it just doesn’t work. I’m stumped. https://www.surroundins.com/how-it-works-3-0

9

I took a look at the page on your site and it the repeater and search works.

What doesn’t it do that you need? What works? What doesn’t?

In your original post you state " What I want should be be really simple." This is true if you have experience coding. Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.

You will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one. The Corvid Resources page provides tutorials, examples , and articles on getting the most out of Corvid.

You may also want to check out the Wix Marketplace - it’s a hub where you can look for Corvid (and other) experts for hire.

However, if you want to try on your own w e are happy to help as questions or difficulties arise.

10

You also might be interested in the Search a Database example. You can load this example in your editor, play with it, learn from it, and modify it for your own use.