Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom search function property to DataSet #93

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

pieterjandebruyne
Copy link

@pieterjandebruyne pieterjandebruyne commented Aug 24, 2022

This change will allow for a custom search function to be passed to Dataset.
If none is passed, things will work as they do now because of the default function.

Usecase for me:
- I want to be able to search objects rather then only strings
- I want some small tolerance fuzzy search

How to use:

// HTML
<DataSet
    v-slot="{ ds }"
    :ds-data="data"
    :ds-sortby="sortBy"
    :ds-search-fc="customSearch"
>
 
 // JS function:
       customSearch(dataset, searchValue) {
        return dataset.filter((item) => {
            return item.value.searchString.includes(searchValue)
        })
    }

note:
When passing custom search fc dsSearchAs & dsSearchIn are no longer used since you have to add that logic in your custom search fc now.

@pieterjandebruyne
Copy link
Author

pieterjandebruyne commented Aug 24, 2022

This could be the most basic implementation for a fuzzy search inside an object with nested inside an email adress using fuse:

customSearch(dataset, searchValue) {
        if (searchValue === '') {
            return dataset
        }
        return new Fuse(dataset, {
            keys: ['value.customer.email'],
            findAllMatches: true,
            includeScore: true,
        }).search(searchValue).reduce((collection, currItem) => {
            if ((currItem.score ?? 1) < 0.3) {
                collection.push(currItem.item)
            }
            return collection
        }, [])
    

This would return all matches that have a fuzzy match score < 0.3, this can be tweaked to make it less or more fuzzy, you can also add keys like phone by adding

       keys: ['value.customer.email', 'value.customer.phone'],

Look at fuse documentation for more info or use whatever filtering function you'd like.

@kouts
Copy link
Owner

kouts commented Aug 24, 2022

@pieterjandebruyne thanks for the PR, but we have the search-as https://vue-dataset-demo.netlify.app/components/#dataset
prop which you can use to pass a custom search function to the desired fields.

@pieterjandebruyne
Copy link
Author

Hi @kouts I first used the search-as but I was not able to get the results I wanted.. If you want to use a libary for fuzzy search you need to be able to provide it with the whole dataset and options for filtering. Searching inside an object could be done with search-as, that's true.

Would be nice to see this merged so I can update from this package, otherwise I will probably fork it for my use-case.

@kouts
Copy link
Owner

kouts commented Aug 25, 2022

Thanks @pieterjandebruyne, I'll find some time to create a demo using fuse with search-as to see if it works.
If it doesn't, I like the idea of passing a custom search function, but we'll have to find a way to integrate it with the rest of dataset's features (e.g searchAs, searchIn) and have it thoroughly tested as well.

@pieterjandebruyne
Copy link
Author

Not sure if compatibility with searchAs and searchIn needs to be possible. Since you fully overwrite everything that has to do with searching/filtering within the function you pass. Things like searchAs is possible within Fuse and searchIn would also be passed as params to Fuse itself. But you might have another vision on this for you lib :).
Thanks in advance.

@pieterjandebruyne
Copy link
Author

@kouts reading through the code I also noticed the whenChanged watcher. Here is both the sort and search logic combined.
If we enter a searchvalue, it will first search the original dataset for matches and then sort it.
But if we then want to sort those results in another way, we again search the whole dataset for matches and then sort it.

You would probably gain a lot of sorting performance when you split the watchers into sorting change / searching change when the data changes you can probably keep the current logic.

Especially if you integrate more advanced searching techniques, like fuzzy searches in this example, it would be great to gain some improved performance on large datasets you want to search/sort.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants