[Solved] Filter data / Special view / merge different searches

Hello,

I would like to show the data in the popup of a dropdownlist in a special way:

- first are the found items that start with the search string (in alphabetic order)
- then comes the list which contains the found items that have the search string in there string or end with it

Any tipps how this can be done easely? I tried to look for a way to customize the query of the updateData or do a first query with updateData and then append the second query. But it seems that isn't possbile...

best regards



7 Replies

SP Sureshkumar P Syncfusion Team November 1, 2019 10:01 AM UTC

Hi Michel, 
 
Greetings from Syncfusion support. 
 
Query 1: 
 
first are the found items that start with the search string (in alphabetic order) 
 
Response: 
 
We can achieve your requirement by setting the “sortOrder“as “Ascending“ as mentioned in the below code example. 
 
<template> 
    <div class="control_wrapper"> 
        <ejs-dropdownlist id='country' :sortOrder="sortOrder" :dataSource='data' :fields='fields' 
            :filtering='onFiltering' :filterBarPlaceholder="filterPlaceholder" :popupHeight='height' 
            :allowFiltering='true' :placeholder='watermark'></ejs-dropdownlist> 
    </div> 
</template> 
 
<script> 
    import Vue from 'vue'; 
    import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 
    import { Query } from '@syncfusion/ej2-data'; 
    import * as data from './dataSource.json'; 
    Vue.use(DropDownListPlugin); 
    export default { 
        name: 'app', 
        data() { 
            return { 
                fields: { text: 'Name', value: 'Code' }, 
                height: '220px', 
                watermark: 'Select a country', 
                filterPlaceholder: 'Search', 
                data: data['countries'], 
                sortOrder: "Ascending" 
            } 
        }, 
        methods: { 
            onFiltering: function (e) { 
                var query = new Query(); 
                //frame the query based on search string with filter type. 
                query = (e.text !== '') ? query.where('Name''startswith', e.text, true) : query; 
                //pass the filter data source, filter query to updateData method. 
                e.updateData(this.data, query); 
            } 
        } 
    } 
</script> 
<style> 
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css"; 
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css"; 
    @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css"; 
</style> 
 
 
Please find the sample from the below link. 
 
 
To know more filtering, please find the below documentation link. 
 
 
Query 2: 
 
then comes the list which contains the found items that have the search string in there string or end with it 
 
Response: 
 
We can achieve your requirement by setting the “filterType“as “endsWith' as mentioned in the below code example. 
<template> 
    <div class="control_wrapper"> 
        <ejs-dropdownlist id='country' :dataSource='data' :fields='fields' :filterBarPlaceholder="filterPlaceholder" 
            :popupHeight='height' :allowFiltering='true' :filterType="filterType" :placeholder='watermark'> 
        </ejs-dropdownlist> 
    </div> 
</template> 
 
<script> 
    import Vue from 'vue'; 
    import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 
    import { Query } from '@syncfusion/ej2-data'; 
    import * as data from './dataSource.json'; 
    Vue.use(DropDownListPlugin); 
    export default { 
        name: 'app', 
        data() { 
            return { 
                fields: { text: 'Name', value: 'Code' }, 
                height: '220px', 
                watermark: 'Select a country', 
                filterPlaceholder: 'Search', 
                data: data['countries'], 
                filterType: "endsWith" 
            } 
        } 
    } 
</script> 
 
 
 
Please find the sample link from the below link. 
 
 
To know more filtering, please find the below documentation link. 
 
 
Regards, 
Sureshkumar P 



MP Michel Pescatore November 1, 2019 03:42 PM UTC

Hello Sureshkumar P ,

Thank you for your feedback.

There answers are 2 different dropdownlists if I am correct? Then I have to be more precise about my question:

I am looking for one dropdown that filters the data in the special way as I described in the 2 points.

if I have data like:
- ww ii uu aa ee
- ii dd uu ee ss
- zz ii aa ii
- aa bb uu ess oo

then the result would be:

- aa bb  uu ess oo -> first all that beginn with the term aa (in sort order)
- ww ii uu aa ee -> then all the contain aa (in sort order)
- zz ii aa ii

Any ideas on this one?

Thank you very much.

best regards.

and I would write aa in the dropbos


SP Sureshkumar P Syncfusion Team November 4, 2019 09:59 AM UTC

Hi Michel, 
 
For this scenario, you can use the filterType as contains and sortOrder as Ascending to achieve your requirement. Please refer the code, 
 
data() { 
    return { 
        fields: { text: 'Name', value: 'Code' }, 
        height: '220px', 
        watermark: 'Select a country', 
        filterPlaceholder: 'Search', 
        data: data['countries'], 
        filterType: "contains", 
        sort: 'Ascending' 
    } 
 
        < ejs - dropdownlist id = 'country' : dataSource = 'data' : sortOrder = 'sort' : fields = 'fields' : filterBarPlaceholder = "filterPlaceholder" 
    : popupHeight = 'height' : allowFiltering = 'true' : filterType = "filterType" : placeholder = 'watermark' > </ejs-dropdownlist> 
 
We created a sample based on your requirement. please refer the sample here:  
 
Regards, 
Sureshkumar P 
 



MP Michel Pescatore November 4, 2019 10:23 AM UTC

Hello Sureshkumar P ,

Thanks again for your answer but I think I have to explain even more. I am not convinced that my case is resolved with one simple query. Lets try the same case with another example.

Items:
- zz bb cc ee ii ff
- uu ff ii ww ss
- aa ii ee ff
- aa bb cc dd ee
- ii zz ee oo
- ii cc rr ff

search term: ii

wanted outcome:
(first all entries that start with the search term in alphabetical order)
- ii cc rr ff 
- ii zz ee oo
(then all strings that contain or end with the search term in alphabetical order)
- aa ii ee ff
- uu ff mm ww ii
- zz cc ee ii ff

It seems to me, that I have to do 2 queries and merge the results of them. Don't you agree?

Thank you very much.

best regards
a


SP Sureshkumar P Syncfusion Team November 5, 2019 11:19 AM UTC

Hi Michel, 
 
We have prepared the sample with above requirement in the filtering event. Please refer the code snippet, 
 
methods: { 
    onFiltering: function(e) { 
        var filteredData = []; 
        var containsData = []; 
        var dropdownlistObj = this.$refs.dropdownlistObj.ej2Instances; 
        var query = new Query(); 
        //frame the query based on search string with filter type. 
        query = (e.text !== '') ? query.where('Name''contains', e.text, true) : query; 
        //pass the filter data source, filter query to updateData method. 
        e.updateData(this.data, query); 
        if (dropdownlistObj.liCollections.length) { 
            for (let i = 0; i < dropdownlistObj.liCollections.length; i++) { 
                if (dropdownlistObj.liCollections[i].innerText.indexOf(e.text) === 0) { 
                    filteredData.push(dropdownlistObj.liCollections[i].innerText); 
                } 
                else { 
                    containsData.push(dropdownlistObj.liCollections[i].innerText); 
                } 
            } 
        } 
        filteredData = filteredData.sort(); 
        if (containsData.length) { 
            containsData = containsData.sort(); 
            for (let i = 0; i < containsData.length; i++) { 
                filteredData.push(containsData[i]); 
            } 
        } 
        e.updateData(filteredData, null); 
    } 
} 
 
 
We created a sample based on your requirement. please refer the sample here:  
 
 
Regards, 
Sureshkumar P 



MP Michel Pescatore November 5, 2019 02:23 PM UTC

Hello Sureshkumar P ,

perfect! Thank you very much.

best regards


SP Sureshkumar P Syncfusion Team November 6, 2019 04:07 AM UTC

Hi Michel, 
 
Thanks for your update. Please get back to us if you need further assistance on this 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon