Looking for a way to do live search / filter of items

support
1

Hey everyone!
Fairly new to Hugo, but loving what I’ve managed to achieve so far!

I have something that I’d like to acheive with Hugo and I’m wondering how feasible it would be:

I’d like to have a page full of external resources (links essentially) displayed as a grid of squares, (with maybe an icon and a title) that is filterable/searchable. I’d like the filter/search to be similar to both of these:
https://www.w3schools.com/howto/howto_js_filter_table.asp
https://www.w3schools.com/howto/howto_js_filter_elements.asp
Where you can both search for items, but also drill down by certain categories.

It would be great if each ‘element’ (like the blue squares in the elements example above) could be it’s own markdown entry, containing the different tags, to make adding/removing entries easier.

2

You can approach this in many ways:

1) Organize the content into a section, and use a list template targeted to this section to loop through the pages, placing each in its own <td> or <div> or whatever. In the example below, your grid would live on /external-resources.

content/
└── external-resources
    ├── resource-01.md
    ├── resource-02.md
    └── resource-03.md

2) Organize the content into a page with page resources, and use a shortcode or single page template to loop through the resources. In the example, below, your grid would live on /posts/post-1.

content/
├── posts
│   ├── post-1
│   │   ├── index.md
│   │   ├── resource-01.md
│   │   ├── resource-02.md
│   │   └── resource-03.md
│   ├── post-2.md
│   └── post-3.md
├── about.md
└── contact.md

3) Create a data file (YAML, JSON) with one object for each external link. Each object would contain the URL and whatever meta data you want. Loop through the objects in a template or shortcode. The data file can be located in /data, or placed as a page resource.

4) Place the links and meta data in the front matter of your markdown file, then loop through those using a shortcode.

I’m sure there are other approaches. Which one you select might depend on the quantity of data, type of data, how often it will change, who will change it, etc.

1 Like
3

Hi @HarmlessSaucer - if you have the Jquery / HTML skills then …

to extend what @jmooring said … once you have arranged the content … then there’s many good jQuery packages that can this sort of thing… and you can use them with your themes list layout - just do a search for Isotope by metafizzy (as example)

1 Like
4

Thank you @jmooring @damien1 to both of you, that’s given me loads to play with and think about! :vulcan_salute: