Creating a "Clear Search" Button

Ask the community
,
1

I am trying to add a clear search button for my filter engine. How do I do this? I want to make it so it only shows when a user starts typing their inquiry, and when they click it, the text clears out of the input field. The code below is the code I am using to make the filter.

import wixData from 'wix-data';

let debounceTimer;
export function searchBox_keyPress(event) {
   filter($w('#searchBox').value); 
if (debounceTimer) {
      clearTimeout(debounceTimer);
      debounceTimer = undefined;
   }
   debounceTimer = setTimeout(() => {
      let val = $w('#searchBox').value;
      console.log(val);
      // some sort of query that might overlap execution 
   }, 500); // 500 milliseconds works for me, your mileage may vary
}

function filter(title) {
        $w('#dataset1').setFilter(wixData.filter().contains('websiteName', title));
}
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.