Search queries as links for filtered listings

[dragonstyle]

Discussed in #6696

^{Originally posted by bambirombi September 4, 2023}

Description

Take as an example this blog: https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/

When I put, a term in the filter-ui it gives me the results that match the term. For example, when I put access it gives 5 posts as a result.

What I want is to have that in form of a link (a search query), so you can see exactly those same results when clicking the link. Something as this https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/search?q=access but that actually work

[e-kotov]

@dragonstyle

you can try embedding this script into your page

document.addEventListener("DOMContentLoaded", function() {
  // Get the URL parameters
  const params = new URLSearchParams(window.location.search);

  // Check if the "filter" parameter exists
  if (params.has("filter")) {
    // Get the value of the "filter" parameter
    const filterValue = params.get("filter");

    // Find the filter input element
    const filterInput = document.querySelector("input.search.form-control");

    // Ensure the input element is found
    if (filterInput) {
      // Set the filter input value
      filterInput.value = filterValue;

      // Trigger both 'input' and 'keyup' events to activate filtering
      const inputEvent = new Event('input', {
        bubbles: true,
        cancelable: true,
      });
      filterInput.dispatchEvent(inputEvent);

      // Simulate a keyup event to trigger the filtering
      const keyupEvent = new KeyboardEvent('keyup', {
        bubbles: true,
        cancelable: true,
        key: 'Enter', // simulate Enter key press
      });
      filterInput.dispatchEvent(keyupEvent);
    }
  }
});

after that you should be able to link like so:
https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/index.html?filter=access

@dragonstyle on a related question, do you know why in your filter any letter case works (both upper and lower), but here https://albert-rapp.de/blog searching for "An" gives nothing while searching for "an" returns results?

[dragonstyle]

Thanks! I don't know why, but on that particular blog, the find appears to never match anything that isn't lowercase (any uppercase letters don't match for me). Without looking more closely at the source code, it's hard for me to say exactly why.

[mcanouil]

I believe this to be more widespread than this blog.

See https://m.canouil.dev/quarto-extensions/

[e-kotov]

I believe this to be more widespread than this blog.

See https://m.canouil.dev/quarto-extensions/

yes, I only used that blog as an example. In fact I am having this issue with all my quarto websites...

My own public example is here:
https://github.com/e-kotov/mitma-data-issues

[dragonstyle]

I think this must be an issue introduced perhaps in a new release of Quarto? I don't see it in some older versions like:

https://web.archive.org/web/20230329074857/https://quarto.org/docs/extensions/

I think it is worth opening a new issue to track this.

[mcanouil]

@dragonstyle on a related question, do you know why in your filter any letter case works (both upper and lower), but here https://albert-rapp.de/blog searching for "An" gives nothing while searching for "an" returns results?

This has been fixed in

• listjs - correctly patch list.min.js to support special character #10725