Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

0:00 Awesome Wix Intro

5:51 Add onKeyPress Function for Search Input

10:01 Add onDblClick Function for Search Input

12:41 Create and Code Search Lightbox

15:40 Create onInput Function

17:21 Search Blog Code

21:50 Style HTML text

22:08 Insert and Create Repeater Code Function

27:05 Locate postPageURL

28:38 Save and Preview Search Bar Functionality

---

Code Snippet to follow along with the video:

Blog Post Page Code

This imports the multiple API's

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

This is the onkeypress function that will be for your input element to send via the blog post page code

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)

}

This is the onDbleClick function that will do the same action as the keypress function.

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 Page Code

This imports the multiple API's

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

This is the onReady Function that will capture all of the elements that were pushed to the lightbox. So gathering this information, it can be set to the correct functions to search the blog posts.

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

These are a few functions that will be able to trigger the search or cancel/delete the text inside the input element.

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

In this section of the code, this will be the search that will find the specific criteria based on the filter in the function.

 async function searchData(parameter) {
    //let elements = $w("#resultsRepeater")
    let queryPostsq = wixData.query("Blog/Posts")
    let queryPosts = queryPostsq.contains("title", parameter)
    await queryPosts.or(queryPostsq.contains("plainContent", parameter));
    await queryPosts.or(queryPostsq.contains("excerpt", parameter));
    //Note: you don't need the two awaits above. The search will fire regardless. 
    await queryPosts.find().then(async (res) => {
        
        if (res.items.length > 0) {
            $w("#noResultsBox").collapse()
            postItems = res.items;
            $w("#resultsRepeater").data = await postItems.slice(0, 4);
            $w("#resultStatebox").expand()
        } else {
            $w("#noResults").html = await '<span style="text-align: center"><p class="p2"> Sorry, no results found for ' + '<b>"' + parameter + '"</p></b></span>';
            $w("#noResultsBox").expand()
            $w("#resultsRepeater").data = []
            $w("#resultStatebox").collapse()
        }
 
    })
}

Now let's place the data that we get from the query above into our repeater to display the results.

 export function resultsRepeater_itemReady($item, itemData, index) {
    // Add your code for this event here: 
    $item("#searchTitle").text = (itemData.title.length > 50) ? itemData.title.slice(0, 47) + "..." : itemData.title;

    $item("#searchExcerpt").text = (itemData.excerpt.length > 100) ? itemData.excerpt.slice(0, 97) + "..." : itemData.excerpt;
    
    $item("#container1").onClick((event) => {
        wixLocation.to(itemData["postPageUrl"])
    })
}

To view the sidebar code and information head on over to this link here: https://ninotutorials.wixsite.com/creativelynino/post/customizing-your-post-sidebar-on-wix-blog-using-corvid-wix-code-tutorial-wix-tutorial-2020

---

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2020: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!