Data Binding: update code in Search API (DevExpress#7061)

vladaskorohodova · Feb 13, 2025 · 1050390 · 1050390
1 parent 2e3e403
commit 1050390
Showing 1 changed file with 62 additions and 0 deletions.
diff --git a/concepts/70 Data Binding/5 Data Layer/2 Reading Data/2 Search Api.md b/concepts/70 Data Binding/5 Data Layer/2 Reading Data/2 Search Api.md
@@ -2,6 +2,9 @@
 
 The [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/') includes search capabilities alongside filtering. The search API consists of three properties: [searchExpr](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/searchExpr.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#searchExpr'), [searchOperation](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/searchOperation.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#searchOperation'), and [searchValue](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/searchValue.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#searchValue').
 
+---
+##### jQuery
+
     <!--JavaScript-->
     const dataSource = new DevExpress.data.DataSource({
         store: [
@@ -19,6 +22,65 @@ The [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/Api
         //'result' contains items whose birthYear is less then 2000 and firstName or lastName contain "doe"
     });
 
+##### Angular
+
+    <!-- tab: app.component.ts -->
+    const dataSource = new DevExpress.data.DataSource({
+        store: [
+            { firstName: "John", lastName: "Doe", birthYear: 1970 },
+            . . .
+        ],
+        filter: [ "birthYear" , "<", 2000 ],
+        searchExpr: function(dataItem) {
+            return dataItem.firstName + " " + dataItem.lastName;
+        }
+    });
+
+    dataSource.searchValue("doe");
+    dataSource.load().then(function(result) {
+        //'result' contains items whose birthYear is less then 2000 and firstName or lastName contain "doe"
+    });
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    const dataSource = new DevExpress.data.DataSource({
+        store: [
+            { firstName: "John", lastName: "Doe", birthYear: 1970 },
+            . . .
+        ],
+        filter: [ "birthYear" , "<", 2000 ],
+        searchExpr: function(dataItem) {
+            return dataItem.firstName + " " + dataItem.lastName;
+        }
+    });
+
+    dataSource.searchValue("doe");
+    dataSource.load().then(function(result) {
+        //'result' contains items whose birthYear is less then 2000 and firstName or lastName contain "doe"
+    });
+
+##### React
+
+    <!-- tab: App.js -->
+    const dataSource = new DevExpress.data.DataSource({
+        store: [
+            { firstName: "John", lastName: "Doe", birthYear: 1970 },
+            . . .
+        ],
+        filter: [ "birthYear" , "<", 2000 ],
+        searchExpr: function(dataItem) {
+            return dataItem.firstName + " " + dataItem.lastName;
+        }
+    });
+
+    dataSource.searchValue("doe");
+    dataSource.load().then(function(result) {
+        //'result' contains items whose birthYear is less then 2000 and firstName or lastName contain "doe"
+    });
+
+---
+
 The default search operation is "contains". To change the search operation, specify the DataSource [searchOperation](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/searchOperation.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#searchOperation') property. You can also modify the search API properties with the following methods: 
 
 - [searchExpr(expr)](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/searchExpr(expr).md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#searchExprexpr')