import wixData from 'wix-data';
export async function getPosts(searchValue) {
const query = wixData.query('Blog/Posts')
.contains('title', searchValue)
.limit(3)
.find();
return query.then(results => {
return {
items: results.items,
hasNext: results.hasNext()
};
})
}
Backend Code:
From: Code Files > Backend, click on the + icon to create a new New Web Module file and call it search.
Master Page Code (masterPage.js):
You can find it from: Page Code > Global (site).
import wixLocation from 'wix-location';
import wixAnimations from 'wix-animations';
import { getPosts } from 'backend/search.jsw'
$w.onReady(function () {
$w('#masterSearchRepeaterWrapper').show();
});
export function masterSearchButton_click(event) {
const value = $w('#masterInput').value;
if (value.length > 0) {
wixLocation.to(`/search?q=${value}`);
}
}
export function seeAllResultsBtn_click(event) {
const value = $w('#masterInput').value;
if (value.length > 0) {
wixLocation.to(`/search?q=${value}`);
}
}
export async function masterInput_input(event) {
if ($w('#masterInput').value !== '') {
const value = event.target.value;
const posts = await getPosts(value)
$w('#masterRepeater').data = posts.items;
posts.hasNext ? $w('#seeAllResultsBtn').show() : $w('#seeAllResultsBtn').hide();
openMasterSearchRepeaterBox();
posts.items.length === 0 ? $w('#masterNoReasultsMessage').show() : $w('#masterNoReasultsMessage').hide();
} else {
closeMasterSearchRepeaterBox();
}
}
export function masterRepeater_itemReady($item, itemData) {
$item('#imageX5').src = itemData.coverImage;
$item('#imageX5').link = itemData.postPageUrl;
$item('#text103').text = itemData.title;
}
export function closeSearchResultsBox_click(event) {
closeMasterSearchRepeaterBox();
}
async function openMasterSearchRepeaterBox() {
const box = $w('#masterSearchRepeaterWrapper');
if (box.collapsed) {
await box.expand();
wixAnimations.timeline()
.add(box, { opacity: 0, y: -300, duration: 0})
.add(box, { opacity: 1, y: 0, duration: 500})
.play()
}
}
function closeMasterSearchRepeaterBox() {
const box = $w('#masterSearchRepeaterWrapper');
wixAnimations.timeline()
.add(box, { opacity: 0, y: -300, duration: 500})
.play()
.onComplete(() => {
box.collapse();
})
}