Repeater with search bar and tag search using tags.

Ask the community
,
1

Ok… I know there are other posts out there that must cover this but simply i am completely lost and need someones help in just writing the code for me.

I have a database set up to show people hikes and i would like to add a search bar to filter the repeater. In addition to the search bar i would like to allow them to search by their state which I have listed the location by state using tags in the database.

If you need more info let me know but help would be greatly appreciated.

1188×674 519 KB

2

Hi Josh,
We have a few examples that will help you get started:

  • Filter a repeater with selection tags

  • Search a database
    You can open them as a template to see the code and figure out how to apply the logic to your site. If you have questions while you’re coding, share your code in a code block so the community can help you troubleshoot. Good luck!

3

I did try this but couldn’t seem to get it to work

4

Can you see a problem with my code here…

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('#dropdown1').value);
}

function filter(title, continent) {
  if (lastFilterTitle !== title || lastFilterContinent !== continent) {
    let newFilter = wixData.filter();
    if (title)
      newFilter = newFilter.contains('title', title);
    if (continent)
      newFilter = newFilter.contains('state1', continent);
    $w('#dynamicDataset').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.title, "label": continent.title};
        }));
        $w('#dropdown1').options = options;
      });

}
5

@welchjoshua818

Try this one…


import wixData from "wix-data";

let lastFilterTitle, lastFilterContinent, debounceTimer;

$w.onReady(() => {loadContinents();
    $w('#dynamicDataset').onReady(()=>{
        $w('#iTitle').onKeypress((event)=>{
            if (debounceTimer) {
                clearTimeout(debounceTimer);
                debounceTimer = undefined;
            }
            debounceTimer = setTimeout((event) => {
                filter($w('#iTitle').value, lastFilterContinent);  
            }, 500);
        });

        $w('#iContinent').onChange((event)=>{filter(lastFilterTitle, $w('#dropdown1').value);});

        function filter(title, continent) {
            if (lastFilterTitle !== title || lastFilterContinent !== continent) {
                let newFilter = wixData.filter();
                if (title) {newFilter = newFilter.contains('title', title);}
                if (continent) {newFilter = newFilter.contains('state1', continent);}
                $w('#dynamicDataset').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.title, "label": continent.title};
        }));
        $w('#dropdown1').options = options;
    }).catch((err)=>{console.log(err);});
}