|
| 1 | +# Vuex Orm Plugin: Search |
| 2 | + |
| 3 | +This plugin adds a **search()** method to the vuex-orm query methods to easily filter matched records using fuzzy search logic from the [Fuse.js](http://fusejs.io/) library. |
| 4 | + |
| 5 | +A simple example to search for '_john_' within your query: |
| 6 | + |
| 7 | +```javascript |
| 8 | +const data = this.$store.getters['entities/users/query']() |
| 9 | + .search('john') |
| 10 | + .orderBy('name', 'asc') |
| 11 | + .offset(0) |
| 12 | + .limit(10) |
| 13 | + .get() |
| 14 | +``` |
| 15 | + |
| 16 | +### API |
| 17 | +The search plugin method accepts two parameters |
| 18 | + |
| 19 | +- **term** : any string or an array of strings |
| 20 | +- **options** : see the _Fuse.js Default Options_ below |
| 21 | + |
| 22 | +**Note:** If passing an array of search terms, the results assume every element in the array must be matched. |
| 23 | + |
| 24 | +```typescript |
| 25 | +search(term: string | Array<string>, options: Object<any>): Array<Records> |
| 26 | +``` |
| 27 | + |
| 28 | +## Requirements: |
| 29 | + |
| 30 | +The search plugin requires **@vuex-orm/core** package version **0.23.2** |
| 31 | + |
| 32 | +To upgrade the **vuex-orm package** simply run |
| 33 | +```bash |
| 34 | +npm install @vuex-orm/core |
| 35 | +``` |
| 36 | + |
| 37 | +## Installation |
| 38 | +```bash |
| 39 | +npm install @vuex-orm/plugin-search --save |
| 40 | +``` |
| 41 | + |
| 42 | +## Plugin Import Directions |
| 43 | + |
| 44 | +Import the search plugin in the Vuex Store entry file. |
| 45 | + |
| 46 | +```javascript |
| 47 | +// ex: store/index.js |
| 48 | +import VuexORM from '@vuex-orm/core' |
| 49 | +import VuexORMSearch from '@vuex-orm/plugin-search' |
| 50 | +```` |
| 51 | + |
| 52 | +Tell VuexORM to install the plugin |
| 53 | + |
| 54 | +```javascript |
| 55 | +VuexORM.use(VuexORMSearch, { |
| 56 | + // configure default fuse.js options here (see below) |
| 57 | +}) |
| 58 | +``` |
| 59 | + |
| 60 | +## Fuse.js Default Options |
| 61 | + |
| 62 | +The plugin provides opinionated default fuse.js options for token based matching for optimum performance. These options are easily changed at two stages of the plugin lifecycle: |
| 63 | + |
| 64 | +- Plugin installation (sets the global default options) |
| 65 | +- Runtime within the **search()** query chain |
| 66 | + |
| 67 | +see: [Fuse.js](http://fusejs.io/) for demo |
| 68 | + |
| 69 | +| Property | Description | Default | |
| 70 | +| --- | --- | --- | |
| 71 | +| searchPrimaryKey | Also search the primary key | false | |
| 72 | +| location | Approximately where in the text is the pattern expected to be found | 0 | |
| 73 | +| distance | Determines how close the match must be to the fuzzy location | 100 | |
| 74 | +| threshold | **0.0** requires a perfect match, and a threshold of **1.0** would match anything | 0.3 | |
| 75 | +| maxPatternLength | Machine word size | 32 | |
| 76 | +| caseSensitive | Indicates whether comparisons should be case sensitive | false | |
| 77 | +| tokenSeparator | Regex used to separate words when searching. Only applicable when **tokenize** is **true** | / +/g | |
| 78 | +| findAllMatches | When true, the algorithm continues searching to even if a perfect match is found | false | |
| 79 | +| minMatchCharLength | Minimum number of characters that must be matched before a result is considered a match | 1 | |
| 80 | +| keys | An array of fields (columns) to be included in the search | Model.$fields() | |
| 81 | +| shouldSort | Whether to sort the result list, by score | false | |
| 82 | +| tokenize | When true, the search algorithm will search individual words **and** the full string, computing the final score as a function of both. **Note**: that when _tokenize_ is _true_, the **threshold**, **distance**, and **location** are inconsequential for individual tokens | false | |
| 83 | +| matchAllTokens | When true, the result set will only include records that match all tokens. Will only work if **tokenize** is also true. **Note**: It is better to use multiple **.search()** query chains if you have multiple terms that need to match. | false | |
| 84 | +| verbose | Will print to the console. Useful for debugging. | false | |
| 85 | + |
| 86 | +## Option Use Examples |
| 87 | + |
| 88 | +Some examples on how to use the search plugin with case specific options |
| 89 | + |
| 90 | +### During Plugin Install |
| 91 | + |
| 92 | +For example, if we want to match based on case sensitive and no fuzzy search logic (perfect match) |
| 93 | +```javascript |
| 94 | +VuexORM.use(VuexORMSearch, { |
| 95 | + caseSensitive: true, |
| 96 | + threshold: 0 |
| 97 | +}) |
| 98 | +``` |
| 99 | + |
| 100 | +### During Query Chain |
| 101 | + |
| 102 | +The global install options will now default to case sensitive and no fuzzy logic, but for example we have a run-time case we need to ignore case and implement a slightly more strict fuzzy search threshold. |
| 103 | + |
| 104 | +Let's also specify the need to only search the **firstName** and **lastName** fields. |
| 105 | + |
| 106 | +```javascript |
| 107 | +const options = { |
| 108 | + caseSensitive: false, |
| 109 | + threshold: 0.3, |
| 110 | + keys: ['firstName', 'lastName'] |
| 111 | +} |
| 112 | +const data = this.$store.getters['entities/users/query']() |
| 113 | + .search('john', options) |
| 114 | + .orderBy('firstName', 'asc') |
| 115 | + .offset(0) |
| 116 | + .limit(10) |
| 117 | + .get() |
| 118 | +``` |
| 119 | + |
| 120 | +### Finding Results Matching Multiple Terms |
| 121 | + |
| 122 | +Let's find all matches where both **pat** and **male** exist in our records, and sort by the date added. |
| 123 | + |
| 124 | +```javascript |
| 125 | +const terms = ['pat', 'male'] |
| 126 | +const options = { |
| 127 | + keys: ['firstName', 'gender'] |
| 128 | +} |
| 129 | +const data = this.$store.getters['entities/users/query']() |
| 130 | + .search(terms, options) |
| 131 | + .orderBy('createdAt', 'desc') |
| 132 | + .get() |
| 133 | +``` |
| 134 | + |
| 135 | +## License |
| 136 | + |
| 137 | +The Vuex ORM Plugin Search is open-sourced software licensed under the [MIT license](LICENSE.md). |
0 commit comments