Create Your Own Wix Blog Search Bar Section using Velo

Blog Post Page Code

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
export function searchPosts_keyPress(event) {
    // Add your code for this event here: 
    setTimeout(() => {
        if (event.key === "Enter") {
            let data = { "searchParam": ($w("#searchPosts").value.length > 0) ? $w("#searchPosts").value : null };
            wixWindow.openLightbox("search", data).then(() => {
                $w("#searchPosts").value = null
            })
        }
    }, 200)

}
export function searchPosts_dblClick(event) {
    // Add your code for this event here: 
    let data = { "searchParam": ($w("#searchPosts").value.length > 0) ? $w("#searchPosts").value : null };
    wixWindow.openLightbox("search", data).then(() => {
        $w("#searchPosts").value = null
    })

}

Lightbox Code

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
let postItems

$w.onReady(function () {
    // TODO: write your page related code here...
    let received = wixWindow.lightbox.getContext()
    if (received) {
        if (received.searchParam) {
            $w("#input1").value = received.searchParam;
            input1_input()
        }
    }
 
});
let inputTimeout
export function input1_input(event) {
    // Add your code for this event here: 
    clearTimeout(inputTimeout);
    inputTimeout = setTimeout(() => {
        if ($w("#input1").value.length > 0) {
            $w("#resultBox").expand()
            $w("#cancelButton").show()
            searchData($w("#input1").value) 
        } else {
            cancelButton_click()
        }
    }, 300)
}

export function input1_blur(event) {
    // Add your code for this event here: 
    if ($w("#input1").value.length > 0) {
        $w("#resultBox").expand()
    } else {
        $w("#resultBox, #resultStatebox, #categorylist").collapse()
        $w("#cancelButton").hide()
    }
}

export function cancelButton_click(event) {
    // Add your code for this event here: 
    $w("#input1").value = null;
    $w("#resultsRepeater").data = []
    input1_blur()
}