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. Image for the cookie policy date

Is it possible to do real time search with multiple keywords

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

8 Replies

SA Saravanan Arunachalam Syncfusion Team April 6, 2017 03:05 AM

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. 



VE Velu April 6, 2017 09:16 PM

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


SA Saravanan Arunachalam Syncfusion Team April 9, 2017 09:40 PM

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



AG ananya gupta September 2, 2019 11:20 PM

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.


BS Balaji Sekar Syncfusion Team September 3, 2019 06:37 PM

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. 



WO womenscenterus September 3, 2019 08:19 PM

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.

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



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 6, 2019 02:54 AM

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 



TS Thavasianand Sankaranarayanan Syncfusion Team September 11, 2019 12:40 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon