react-structured-query-search is a javascript library that provides autocomplete search queries.
This was inspired by visualsearch and react-structured-filter
This plugin is written on top of react-structured-filter, which has been revamped to add React 16 support and the existing code has been overriden to support New features.
You can use all the react-typeahead, react-structured-filter API(options) as they are.
- Ajax support to retrieve values.
- Allows user to send values for Category in
Array<String>orArray<Object> - Allows user to pass custom loader component.
- Allows user to customize the header of dropdown (categories, operators, values).
- Allows user to enable/disable operators in search.
- Allows user to perform category-value search without operator (if isAllowOperator is false).
- Switch between unique/duplicate categories (key).
- Switch between unique/duplicate values
- Allows user to send custom operators list.
- Allows user to render custom tag(token) Component or the tag(token) Item.
- Allows user to update Options(props) on runtime.
npm install --save react-structured-query-searchUsage (Example Code) (Demo)
If you want to use Tokenizer then you either import as follows:
import ReactStructuredQuerySearch from "react-structured-query-search"; import "react-structured-query-search/dist/index.css";import {Tokenizer} from "react-structured-query-search"; import "react-structured-query-search/dist/index.css";If you want to use Typeahead then you have to import as follows:
import {Typeahead} from "react-structured-query-search"; import "react-structured-query-search/dist/index.css";| Parameter | Type | Default | Description |
|---|---|---|---|
| options | Array | [] | An array supplied to the filter function. |
| maxVisible | Number | Limit the number of options rendered in the results list. | |
| customClasses | Object | Allowed Keys:
An object containing custom class names for child elements. Useful for integrating with 3rd party UI kits. | |
| placeholder | String | Placeholder text for the typeahead input. | |
| 🆕 disabled | Boolean | false | Set to true for disabling the StructureQuerySearch |
| 🆕 defaultSelected | function, Array | [] | Allows user to initialize the search with selected values |
| 🆕 categoryHeader | String, Component | "Category" | Allows user the change the header title of Category |
| 🆕 operatorHeader | String, Component | "Operator" | Allows user the change the header title of Operator |
| 🆕 valueHeader | String, Component | "Value" | Allows user the change the header title of Value |
| 🆕 isAllowSearchDropDownHeader | Boolean | "true" | Allows user to enable/disable search drop-down header |
| 🆕 isAllowOperator | Boolean | false | Allows user to enable/disable operators in search |
| 🆕 isAllowClearAll | Boolean | true | Allows user to clear all selected data |
| onTokenRemove | Function | Event handler triggered whenever a token is removed. | |
| onTokenAdd | Function | Event handler triggered whenever a token is added. Params: (addedToken) | |
| 🆕 onClearAll | function | Event handler triggered whenever clear all button clicked | |
| onOptionSelected | Function | Event handler triggered whenever a user picks an option. | |
| 🆕 updateOptions | function | Allows user to update the Options(props) at runtime, this function is called before onTokenRemove and onTokenAdd | |
| 🆕 fuzzySearchEmptyMessage | String | "No result found" | This message is shown when dropdown doesn't have search value |
| 🆕 renderLoading | function, Component | "Loading...." | Show custom loader when values are retrieved using Ajax |
| 🆕 renderTokens | function | Allows user to render custome Token Component | |
| 🆕 renderTokenItem | function | Allows user to render custome Token Item | |
| 🆕 renderSearchItem | function | Allows user to render custome value | |
| onKeyDown | Function | Event handler for the keyDown event on the typeahead input. | |
| onKeyPress | Function | Event handler for the keyPress event on the typeahead input. | |
| onKeyUp | Function | Event handler for the keyUp event on the typeahead input. | |
| onBlur | Function | Event handler for the blur event on the typeahead input. | |
| onFocus | Function | Event handler for the focus event on the typeahead input. |
| Parameter | Type | Default | Required | Description |
|---|---|---|---|---|
| category | String | required | Name of the first thing the user types. | |
| type | String | text | This can be one of the following:
| |
| 🆕 operator | Array, function | required, if isAllowOperator prop is set to true | If this attribute is added then it would ignore the type check as described in type parameter and it would accept what you have passed | |
| options | Array, function, Promise | required, if type="textoptions" | Get the value according to selected category | |
| 🆕 isAllowCustomValue | Boolean | false | When this parameter is set to true, it allows you to send multiple custom values for type=textoptions | |
| 🆕 isAllowDuplicateCategories | Boolean | true | Switch between unique/duplicate categories (key) | |
| 🆕 isAllowDuplicateOptions | Boolean | false | Switch between unique/duplicate values | |
| 🆕 fuzzySearchKeyAttribute | String | name | If Category (options)values are Array<Object> then By default fuzzy search look for name attribute inside options(values) but you can change that attribut lookup key using fuzzySearchKeyAttribute |
Please run npm install in the root and example folders. then do the following:
- Go to root folder and run
npm startafter this - Go to example folder and run
npm run link(only for first time) - Go to example folder and run
npm startit would run the plugin from link which we have created.
Now, anytime you make a change to your library in src/ or to the example app's example/src create-react-app will live-reload your local dev server so you can iterate on your component in real-time.
MIT © kevalbhatt