Creating a "Clear Search" Button

Ask the community
,
2

Here it is:

import wixData from "wix-data"

let debounceTimer
export function searchBox_keyPress(event) {
    if (debounceTimer) {
        clearTimeout(debounceTimer)
        debounceTimer = undefined
    }
    debounceTimer = setTimeout(() => {
        let val = $w("#searchBox").value
        //this is added to make sure everything happens if at least 1 character is pressed
        if (val.lenght > 0) {
            console.log(val)
            //This should be here, cause you need to wait after 500ms to filter
            filter(val)
            //This is to show the clear button if something is pressed.
            $w("#buttonClear").show()
        } else {
            $w("#buttonClear").hide()
        }
    }, 500) // 500 milliseconds works for me, your mileage may vary
}

function filter(title) {
    $w("#dataset1").setFilter(wixData.filter().contains("websiteName", title))
}

//This is the click function for the clear button.
export function buttonClear_click(event) {
    $w("#searchBox").value = ""
}

Remember that the buttonClear should be hidden by default.