We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is it possible to do real time search with multiple keywords

Thread ID:

Created:

Updated:

Platform:

Replies:

147142 Apr 5,2017 12:01 PM UTC Sep 11,2019 08:40 AM UTC ASP.NET Core - EJ 2 8
loading
Tags: DataGrid
Velu
Asked On April 5, 2017 12:01 PM UTC

Hi Syncfusion Support,

Please help me to do real time search with multiple keywords.

I'm using Syncfusion Grid control with search text box. It can give result when I search for, but when I click on search button.

My requirement is, it has to give search result when start typing which means key press/text change like real time search result. Is it possible?

And also search with multiple keywords like "engine,wheel,tyre" so that it would search all the columns and return rows.

Regards,
Velu

Saravanan Arunachalam [Syncfusion]
Replied On April 6, 2017 11:05 AM UTC

Hi Velu, 
Thanks for contacting Syncfusion’s support. 
Query 1: it has to give search result when start typing which means key press/text change 
We have achieved your requirement by using Create event of Grid control. In the Create event, we have bound the jQuery’s keyup event for the the search input box in the toolbar and perform search based on the inputed text by using search method Grid control. Please refer to the below code example. 
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"> 
            . . . 
            <ClientSideEvents ActionComplete="actionComplete" ActionBegin="actionBegin" Create="onCreate" ToolbarClick="toolbarClick" />     
        </ej:Grid> 
function onCreate(args) { 
            $(".e-gridtoolbar").find(".e-gridsearchbar").keyup(function (e) { 
                setTimeout(function () { 
                    var str = $(e.target).val(); 
                    $("#Grid").ejGrid("search", str); 
                }, 1000) 
            }) 
        } 
 
Query 2: search with multiple keywords like "engine, wheel, tyre" 
We don’t have inbuilt support to search multiple terms and we have already logged a feature request “Need to give multiple search support to Datamanager” and it can be impleamented any of our upcoming release. 
And we have achieved your reqiurement in workaround by using ActionComplete and ToolbarClick event of Grid control. In the ActionComplete event, we have performed the searching with multiple terms when requestType is searching and please refer to the below code example and jsplayground sample. 
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"> 
            . . . 
            <ClientSideEvents ActionComplete="actionComplete" ActionBegin="actionBegin" Create="onCreate" ToolbarClick="toolbarClick" />     
        </ej:Grid> 
function toolbarClick(args) { 
            if (args.itemName == "Search" && args.model.searchSettings.key == "" && searchApplied && $("#Grid_searchbar").val() == "") { 
                searchApplied = false; 
                searchKey = ""; 
                keyValue = []; 
            } 
        } 
        function actionBegin(args){ 
             if (args.requestType == "searching" && this.model.searchSettings.key == "")  
                this.model.query.queries = []; 
        } 
        function actionComplete(args) { 
            if (args.requestType == "searching") { 
                 if (this.model.searchSettings.key != "") { 
                    Searchkeyword = this.model.searchSettings.key.split(","); 
                    if (Searchkeyword.length > 1) { 
                        if (args.requestType == "searching") { 
                            if (this.model.searchSettings.key != "") { 
                                // split based on the (,) 
                                searchKey = this.model.searchSettings.key; 
                                keyValue = args.keyValue.split(","); 
                            } 
                            this.clearSearching(); 
                            // searching apply 
                            if (this.commonQuery.queries.length > 0) 
                                this.commonQuery.queries = []; 
                            var i,pred = ej.Predicate("CustomerID", "contains", $.trim(keyValue[0]), true); 
                            for(i=1;i<keyValue.length;i++){ 
                                pred = pred["or"]("CustomerID", "contains", $.trim(keyValue[i]), true); 
                            }    
                            this.commonQuery.where(pred); 
                            searchApplied = true; 
                            $(".e-ejinputtext.e-gridsearchbar").val(searchKey) 
                            this.refreshContent(); 
                            this.model.allowSearching = false; 
                        } 
                        $("#Grid_searchbar").val(searchKey); 
                        this.model.searchSettings.key = searchKey; 
                    } 
                } 
           } 
        } 
 
Note: Limitation of this workaround is that we can perform searching with multiple terms on any one of the field. 
Regards, 
Saravanan A. 


Velu
Replied On April 7, 2017 05:16 AM UTC

Hello Saravanan,

Thank you very much for your extended support. It's really worked great as I expected.

Syncfusion support is always great because of immediate reply with examples.... :)

Regards,
Velu

Saravanan Arunachalam [Syncfusion]
Replied On April 10, 2017 05:40 AM UTC

Hi Velu,  
Thanks for your update.       
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


ananya gupta
Replied On September 3, 2019 07:20 AM UTC

Hi, Thanks for sharing useful codes. I used, it works I am a fresher so I want to know more about it. I have completed my. NET training from CETPA INFOTECH. Best institute in NOIDA because of the best trainers and environment for students.

Balaji Sekar [Syncfusion]
Replied On September 4, 2019 02:37 AM UTC

Hi Velu, 

Yes, we can search the text value based on typing the values in search textbox instead of click on search button using created event and we have bind actionBegin event and prevent the default search action and customize the filter query based on the multiple keywords(search). Please refer the below code example and sample for more information. 
[index.cshtml] 
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" toolbar="@(new List<string>() {"Search" })" created="created" actionBegin="actionBegin" actionComplete="actionComplete">     
    <e-grid-columns>         
        .    .     .    .         
    </e-grid-columns> 
</ejs-grid> 
<script> 
    var debounceTimer = null; 
    var gquery, val; 
    function created(e) {         
        document.getElementById("Grid_searchbar").addEventListener('keyup', (event) => { 
            clearTimeout(debounceTimer); // you can customize as per your requirement(Searh action trigger while KEYPRESS) 
            debounceTimer = setTimeout(() => { searchFun(event); }, 500); 
        })  
    } 
 
    function actionBegin(args) {         
        if (args.requestType == "searching") { 
            var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
            const keys = args.searchString.split(','); //Split your search text and get the values 
            var flag = true; 
            var predicate; 
            if (keys.length > 1) { 
                if (this.searchSettings.key !== '') { 
                    val = args.searchString; 
                    // preparing filter query 
                    keys.forEach((key) => { 
                        this.getColumns().forEach(col => { 
                            if (flag) { 
                                predicate = new ej.data.Predicate(col.field, 'contains', key); 
                                flag = false; 
                            } else { 
                                var pre = new ej.data.Predicate(col.field, "contains", key); 
                                predicate = predicate.or(pre);                                                            } 
                        }); 
                    }); 
                    gquery = this.query; 
                    this.query = new ej.data.Query().where(predicate);                     
                    this.searchSettings.key = ''; 
                    this.refresh(); 
                } 
            } 
        } 
    } 
 
    function actionComplete(e) { 
        if (e.requestType === 'refresh') { 
            this.query = gquery; 
            document.getElementById(this.element.id + '_searchbar').value = val; 
        } 
    } 
    function searchFun(event) { 
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
        var value = event.target.value; 
        grid.search(value); 
        clearTimeout(debounceTimer); 
    } 
</script> 
 
 
Regards, 
Balaji Sekar. 


womenscenterus
Replied On September 4, 2019 04:19 AM UTC

Yes, we can.
You can enter more than one keyword into Google at real time to view all options. 
Simply key on “OR” between the terms.

-------------------------------------------------------


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 6, 2019 10:54 AM UTC

Hi Velu, 

Thanks for contacting Syncfusion support. 

We have validated your requirements and logged it as a Custom sample with all requested queries. Currently, we are working on this custom sample and we will provide the sample on September 11th, 2019. Until then we appreciate your patience.  

Regards, 
Seeni Sakthi Kumar S 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On September 11, 2019 08:40 AM UTC

Hi Velu, 

Yes, We can get the real time search result while keypress action basis with multiple keys searching operation. We have achieved your requirement using toolBarTemplate feature in the EJ2 Grid. In below code example, we have bind the MultiSelection component in toolbar and we can list-out the typing input text value on MultiSelection component and multiple keys searching options also provided. Please refer the below code example and sample for more information. 
 
[index.cshtml] 

@{ 
    ViewData["Title"] = "Home Page"; 
    List<Object> toolbarItems = new List<Object>(); 
    toolbarItems.Add(new { template = "#toolbarTemplate" }); 
} 
<div id="toolbarTemplate" type="text/x-template"> 
    <div> 
        <ejs-multiselect id="games" width="200" allowFiltering="true" select="MultiSelectSelectAction" removing="MultiSelectRemovedAction" dataBound="MultiSelectDataBoundAction" placeholder="Search here..."> 
        </ejs-multiselect> 
    </div> 
</div> 
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging="true" toolbar=toolbarItems> 
    <e-grid-columns> 
       .    .     .    . 
    </e-grid-columns> 
</ejs-grid> 
<script> 
    var debounceTimer = null, predicate;  
    function MultiSelectDataBoundAction(args) {         
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
        var data = []; 
        grid.getColumns().forEach(item => { 
            var dt = new ej.data.DataUtil.distinct(grid.dataSource, item.field); 
           data= data.concat(dt); 
        }) 
        this.dataSource = data; //MultiSelection component dataSource binding here 
    } 
 
    function MultiSelectSelectAction(args) {         
        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
        var keys; 
        
        if (this.value && this.value.length > 0) { 
            this.value = this.value.filter((v, i, a) => a.indexOf(v) === i); 
            var itemData = this.value; 
            itemData.push(args.itemData); 
            keys = itemData ; //Split your search text and get the values 
        } else { 
            keys = [args.itemData]; 
        } 
        var flag = true; 
        var predicate; 
        if (keys.length >= 0) { 
            if (args.itemData !== '') { 
                let val = args.itemData; 
                keys.forEach((key) => { 
                    grid.getColumns().forEach(col => { 
              //Create predicates for whole columns with search text value 
                        if (flag) { 
                            predicate = new ej.data.Predicate(col.field, 'contains', key); 
                            flag = false; 
                        } else { 
                            var pre = new ej.data.Predicate(col.field, "contains", key); 
                            predicate = predicate.or(pre); 
                        } 
                    }); 
                }) 
                grid.query = new ej.data.Query().where(predicate);  // Bind the created predicate to Grid query property 
                grid.refresh(); 
 
            } 
        } 
    } 
 
  


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon