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);
}

原文链接:https://www.lopuo.com/?answer=wix%e6%b7%bb%e5%8a%a0%e4%b8%8b%e6%8b%89%e7%ad%9b%e9%80%89%e6%95%b0%e6%8d%ae%e9%9b%86%e5%8f%8a%e6%90%9c%e7%b4%a2%e5%8a%9f%e8%83%bd,转载请注明出处。

4
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录