製造業ポータルサイト
会社名検索
入力データ検索の製作解説
編集画面のDev Modeを有効にすると画面の一番下に編集画面が表示されます。
最初の記入内容を全て削除して、以下のコードをコピーして貼り付けます。
import wixData from 'wix-data';
let debounceTimer;
$w.onReady(function () {
$w("#dataset1").onReady( () => {
let count = $w("#dataset1").getTotalCount();
$w("#totalText").text = 'Total: ' + count;
$w("#companyRepeater").onItemReady( ($item, itemData, index) => {
$item("#gyoText").text = itemData.title;
$item("#gyoText").text = itemData.kubun;
$item("#areaText").text = itemData.area;
$item("#naiyoText").text = itemData.Company_profile;
$item("#companyImage").src = itemData.image01;
$item("#companyImage").tooltip = itemData.title;
$item("#companyImage").link = itemData.url;
});
});
$w("#searchInput").onKeyPress( (event) => {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w("#searchInput").value);
}, 350);
});
$w("#refreshButton").onClick( (event) => {
filter();
$w("#searchInput").value = undefined;
});
});
let lastFilterName;
async function filter(title) {
if(lastFilterName !== title) {
let newFilter = wixData.filter();
if(title)
newFilter = newFilter.contains('title', title);
await $w("#dataset1").setFilter(newFilter);
let count = $w("#dataset1").getTotalCount();
$w("#totalText").text = 'Total: ' + count;
setVariables(title);
}
}
function setVariables(title) {
lastFilterName = title;
}
現在は会社名で検索しているが、
ここのtitleの記載部分を全て別のフィールド名にした場合は、そのフィールドに含まれるデータが検索される。（検索形式：〇を含む一致形式）
検索BOXと連動させる
Total: 46
