WIX添加下拉筛选数据集及搜索功能

1.新建一个input txt，一个 下拉选择器

2. 选择Data name

3.替换~~~

看看Demo

https://hellowod.wixsite.com/demo/phonenumber

代码在下面

import wixData from “wix-data”;

$w.onReady(() => {
wixData.query(‘Projects’)
.find()
.then(res => {
let options =[

{ “value”: ”,  ‘label’: ‘All Number’},
{ “value”: ‘vip’,  ‘label’: ‘VIP Phone Numbers’},
{ “value”: ‘gold’, ‘label’: ‘Gold Phone Numbers’}

] ;

options.push(…res.items.map(continent => {

return{‘value’:continent.title,’lable’:continent.title};
}));
$w(‘#iContinent’).options = options;
})
});

let lastFilterTitle;
let lastFilterContinent;

let debounceTimer;
export function iTitle_keyPress(event,$w) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:

if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer= undefined;
}
debounceTimer= setTimeout(() => {
filter($w(“#iTitle”).value,lastFilterContinent);
}, 200)
}

function filter (title,continent) {
if(lastFilterTitle !== title ||lastFilterContinent !== continent ) {
let newFilter =wixData.filter() ;
if (title)
newFilter = newFilter.contains(‘title’, title) ;
if (continent)
newFilter = newFilter.eq(‘pricetags’, continent)

$w(‘#dataset’).setFilter(newFilter);
lastFilterTitle= title;
lastFilterContinent= continent;
}
}

export function iContinent_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
filter(lastFilterTitle, $w(‘#iContinent’).value);
}