- Home
- Forum
- ASP.NET Core - EJ 2
- Is it possible to do real time search with multiple keywords
Is it possible to do real time search with multiple keywords
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
|
<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)
})
} |
|
<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;
}
}
}
} |
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
|
[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> |
|
[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();
}
}
}
|
What about Server side multiple keyword searching with this approach ?
How can we achieve that
this solution is not working for server side approach.
Can you have any approach for server side ?
Thanks.
Hi Hiral,
Query: Can you have any approach for server side ?
Yes, the method mentioned above works only for local data.
For remote data, we recommend you to modify the approach to retrieve the
dataSource of the MultiSelect component within the dataBound event. We
sent a request to the server using the DataManager, and in the executeQuery method, we passed an
empty query to retrieve all records from the server. Upon the successful
completion of the request in the then
block, we obtained the result, extracted the distinct values, and set them as
the dataSource for the MultiSelect component.
Please refer the below code example:
|
<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" allowPaging="true" toolbar=toolbarItems> <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager> <e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> <e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column> <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> <e-grid-column field="ShipCity" headerText="Ship Details" width="150"></e-grid-column>
</e-grid-columns> </ejs-grid> <script> var debounceTimer = null, predicate;
var isInitial = true;
function MultiSelectDataBoundAction(args) { if (isInitial) { isInitial = false;
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; var data = []; new ej.data.DataManager({ url: "/Home/UrlDataSource", adaptor: new ej.data.UrlAdaptor }) .executeQuery(new ej.data.Query()).then((e) => { grid.getColumns().forEach(item => { var dt = new ej.data.DataUtil.distinct(e.result, item.field); data = data.concat(dt); });
var multiSelect = document.getElementById("games").ej2_instances[0]; multiSelect.dataSource = data; });
} }
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 => { 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); grid.refresh();
} } } function MultiSelectRemovedAction(args) { var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; if (this.value.indexOf(args.itemData) != -1) { var index = this.value.indexOf(args.itemData); this.value = this.value.filter((v, i, a) => a.indexOf(v) === i); this.value.shift(index) var keys = this.value; if (this.value.length != 0) { if (keys.length >= 0) { if (args.itemData !== '') { keys.forEach((key) => { grid.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); } }); }) grid.query = new ej.data.Query().where(predicate); grid.refresh(); } } } else { grid.query = new ej.data.Query(); grid.refresh(); } } }
</script> |
- 10 Replies
- 9 Participants
-
VE Velu
- Apr 5, 2017 12:01 PM UTC
- Oct 8, 2024 01:02 PM UTC
