Ways to manipulate the Filter input with Javascript or jQuery?

General
1

@Louis

Currently we have two input search filter for our query (one is hidden by default), and we created a Select dropdown and bind it with jQuery so when we select different options in the select, it will toggle between different input search filter.

Now I’m looking for a way to reset my search result from one input search field when we select different options in our Select dropdown. We found out that standard jQuery manipulation to empty the value of the search input will not affect anything to the Query result. We tried to do a lot of different approach such as combining the empty of value, trigger change event, and also even do a keyboard event and none of them works.

I’m wondering what’s the proper way for us to manipulate the search input filter with javascript? Any advices? Thank you!

2

Bumping this, does anyone has any solution for this?

3

Hello @lukelee,

It might be easier for me to check this out with a frontend link so I can see exactly what is happening. If you can send it by PM, I’d be grateful.

Cheers,

4

Hi @Louis ,

Just PMed you, look forward for some great suggestion!

5

So @Louis has guided me the way we manipulate the frontend render filtee with javascript. So we can do certain action and actually affect the filter itself.

Here is the code that Louis shared:

function removeParameterFromCurrentUrl(type) {
  // Get the current URL from the browser's address bar
  const currentUrl = window.location.href;

  // Create a URL object to work with the URL
  const urlObject = new URL(currentUrl);

  // Check if the parameter exists
  if (urlObject.searchParams.has(type)) {
    // Remove the parameter
    urlObject.searchParams.delete(type);

    // Get the modified URL as a string
    const modifiedUrl = urlObject.toString();

    // Replace the current URL with the modified URL (changes the browser's address bar)
    window.history.replaceState({}, document.title, modifiedUrl);

    // Trigger a popstate event to notify any event listeners
    const popStateEvent = new PopStateEvent("popstate", { state: {} });
    window.dispatchEvent(popStateEvent);
  }
}

// Call the function to remove the "tt" parameter from the current URL. 
removeParameterFromCurrentUrl('tt');

So basically it declare a function for popstate event where we can use to call to at any condition we want. This is great to learn and to know. Hope this will help if someone is also looking to manipulate the filter result by javascript in the future.

2 Likes