search multiple keys (alpine toolbox example)

[aanomm]

• firstly, alpine is amazing; thanks everyone involved
• i've seen the awesome cards seach example at alpine toolbox
• how would you get alpine to seach multiple key values instead of just one (as per the demo)?
• for example: search employee_age and employee_name

[ryangjchandler]

Hi @stoqe, thanks for the kind words!

The first approach that comes to mind would be searching / filtering the array twice and then merging those 2 arrays together so that you have unique results.

I've created a simple CodePen with an example: https://codepen.io/ryangjchandler/pen/pojZVbB

The code is rather messy since I've thrown it together, but give it a go and let me know if you don't understand anything :)

[aanomm]

• wow thanks @ryangjchandler; that was faaaaast!
• this usecase needs more an 'or' style search than an 'and' style search
• so i'll look at your codepen and see if that can guide my way (probs unlikely though)
• i'm hoping a single alpine search can return any item that matches the data from key1 or key2
• ex: using the alpine toolbox example a single searchbar searches the employee_name data and the employee_age data and if either === the search query then the item displays

[SimoTod]

You can write your condition inside a single filter directive

return this.myForData.filter((item) => {
    return item.employee_name.toLowerCase().includes(this.searchName.toLowerCase()) || item.employee_age == this.searchName
});

It's standard javascript at that point so you can combine them as you need.

[ryangjchandler]

Exactly as Simone said. If you need the OR functionality, do it in a one liner.

[aanomm]

• thanks @ryangjchandler & @SimoTod
• grateful for your help
• and supes grateful for alpine too
• it feels like a total gamechanger

[hajhamzah]

Taking clue from @SimoTod answers ("its standard javascript search") + Stackoverflowing a couple of hours, i manage to search multiple key values (employee name, age and salary) with the following modification on filter directive:

            return this.myForData.filter((item) => {
              return (item.employee_name + item.employee_age + item.employee_salary)
                .toLowerCase()
                .includes(this.search.toLowerCase());
            });

[HugoDF]

If you wanted to go even beyond what @SimoTod and @ryangjchandler suggested, you can actually use a full text search engine implemented in JavaScript, there are a couple around, fuse.js and lunr.js come to mind (see https://www.npmjs.com/package/fuse.js or https://www.npmjs.com/package/lunr).

This will allow you to create more complex match rules and weighted full-text search (eg. if I find the search in the title of a post, it'll be a closer match than if it just appears in the description or text).

[aanomm]

• thanks @HugoDF; much appreciated
• that sounds super and i appreciate the extra functionalty (weighted results)
• i love alpine for it's lightness and for this usecase i think the multi-key search will suffice
• i keep seeing fuse on talked about online though so it's on my radar for sure

[amritnagi]

I actually use fuse on alpinetoolbox for the main site search.
I'll setup a simple example using that as well!

[josh-tt]

@amritnagi Hi Amrit, did you get an example setup of this posted ever?

[amritnagi]

Hi @josh-tt - i've knocked up something quickly here: https://gist.github.com/amritnagi/0c12a7dc725a945731087c8331b148fc

Annoyingly, i've broken php on my mac, so can't update it on alpinetoolbox, but will add it once i've sorted it out!

[josh-tt]

Nice one, thanks Amrit. Going to check that out, cheers. Hope you get the
Mac issue sorted.