search-gold 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
Your web page displays a list of columnar information, based on the common data
|
|
5
|
+
Your web page displays a list of columnar information, based on the common data structure:
|
|
6
6
|
|
|
7
7
|
`array of objects`
|
|
8
8
|
|
|
@@ -52,7 +52,7 @@ const initSearchConfig = () => {
|
|
|
52
52
|
// objects.
|
|
53
53
|
//
|
|
54
54
|
// 'search-gold' package only reads this data.
|
|
55
|
-
//
|
|
55
|
+
// Search results are returned in a separate array.
|
|
56
56
|
items: MyData,
|
|
57
57
|
|
|
58
58
|
// required: keys are the object properties you
|
|
@@ -68,8 +68,8 @@ const initSearchConfig = () => {
|
|
|
68
68
|
// You should only ever consider disabling
|
|
69
69
|
// memoization if you observe browser memory
|
|
70
70
|
// limitations with cached search results.
|
|
71
|
-
enableMemoize: false
|
|
72
|
-
}
|
|
71
|
+
enableMemoize: false,
|
|
72
|
+
}
|
|
73
73
|
|
|
74
74
|
// Call the imported method with config arg.
|
|
75
75
|
searchSetConfig(config)
|
|
@@ -78,12 +78,14 @@ const initSearchConfig = () => {
|
|
|
78
78
|
// as many times as necessary without having to set the
|
|
79
79
|
// config again.
|
|
80
80
|
//
|
|
81
|
-
//
|
|
82
|
-
//
|
|
81
|
+
// Your template would be iterating over myFilteredData
|
|
82
|
+
// in this example.
|
|
83
83
|
//
|
|
84
84
|
// How you set up your component to display the filtered
|
|
85
85
|
// data is up to you and how your component is structured.
|
|
86
|
-
//
|
|
86
|
+
//
|
|
87
|
+
// Passing an empty string effectively returns the
|
|
88
|
+
// the unfiltered set of records, the same as MyData.
|
|
87
89
|
myFilteredData = <ItemRecord[]>searchHandler('')
|
|
88
90
|
}
|
|
89
91
|
````
|
|
@@ -105,7 +107,9 @@ initSearchConfig()
|
|
|
105
107
|
### 4. Execute search queries and get results.
|
|
106
108
|
|
|
107
109
|
Presumably, a method is binded to the UI's search field (in this example it's called
|
|
108
|
-
`searchMyData`) and is called on every keystroke, debounced keystrokes, or an explicit
|
|
110
|
+
`searchMyData`) and is called on every keystroke, debounced keystrokes, or an explicit
|
|
111
|
+
and separate submit event. Ultimately, the UX behavior is left up to the front end
|
|
112
|
+
engineer / design team.
|
|
109
113
|
```javascript
|
|
110
114
|
const searchMyData = (query: string) => {
|
|
111
115
|
// Call the imported method and get results.
|
|
@@ -116,10 +120,11 @@ const searchMyData = (query: string) => {
|
|
|
116
120
|
## Author's Development
|
|
117
121
|
|
|
118
122
|
During development of the `search-gold` package, I integrated it
|
|
119
|
-
into
|
|
123
|
+
into several apps I had previously created with Vue using its Composition API.
|
|
120
124
|
|
|
121
125
|
In this documentation I tried to keep the Usage code snippets framework neutral.
|
|
122
126
|
|
|
127
|
+
`search-gold` itself is framework neutral and should work in any TS codebase.
|
|
123
128
|
# Credits
|
|
124
129
|
|
|
125
130
|
G. Gold
|