Combobox Options as Links

Attributes
,
1

Hello!

I’m using a combobox to populate a list of items (Blog Posts) from a CMS Collection, and I’d like to allow a user to click on the item in the combobox to navigate directly to the page for that item (Blog Post).

image
image286×190 3.43 KB

Staging URL: Blog

Read Only Link: Webflow - Insuraviews V2

Thanks in advance for the help!

2

Hi @nick5,

We’d recommend using custom JavaScript to make your combo box options clickable for navigation to blog posts.

To implement this, you’ll need to:

  1. Add a dynamic attribute data-href with the post slug as its value to each of the elements with fs-list-element="select-value".

  2. Add JavaScript to update the combo box options with the correct href, and redirect the user when an option is selected:

<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'combobox',
    (dropdownElements) => {
      console.log('Combobox Loaded!');

      const dynamicLinks = Array.from(
        document.querySelectorAll('[fs-list-element="select-value"]')
      );

      const applyHrefs = () => {
        const comboOptions = Array.from(
          document.querySelectorAll('[fs-combobox-element="option-template"]')
        );

        dynamicLinks.forEach((link) => {
          const linkText = link.textContent.trim();
          const linkHref = link.getAttribute('data-href');

          const matchingOption = comboOptions.find((option) => {
            const optionText = option.querySelector('div:last-child')?.textContent.trim();
            return optionText === linkText;
          });

          if (matchingOption && linkHref) {
            matchingOption.setAttribute('href', `/post/${linkHref}`);
          }
        });
      };

      applyHrefs();

      document.querySelectorAll('[fs-combobox-element="dropdown"]').forEach((dropdownEl) => {
        const listEl = dropdownEl.querySelector('.fs-combobox_list');
        if (listEl) {
          listEl.addEventListener('click', function (event) {
            const option = event.target.closest('[fs-combobox-element="option-template"]');
            if (option) {
              event.preventDefault();
              const targetHref = option.getAttribute('href');
              if (targetHref) {
                window.location.href = targetHref;
              }
            }
          });
        }
      });

      const observer = new MutationObserver(() => {
        applyHrefs();
      });

      document.querySelectorAll('.fs-combobox_list').forEach((listEl) => {
        observer.observe(listEl, { childList: true, subtree: true });
      });
    },
  ]);
</script>

This solution works by redirecting users when they select an option from your combo box. Since this requires custom code implementation, @Support-Luis or @Support-Pedro can help you implement this based on your specific setup.

3

That worked perfectly - thank you @Support-Finn ! :flexed_biceps: