🎉
react-structured-query-search This is a fork of react-structured-query-search for use in Glabbr. The Ui is changed and onEnter event handler is added. 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.
🎉 🎊 New Features 🎊 🎉
- 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.
Install
npm install --save react-structured-query-search
Example Code) (Demo)
Usage (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";
or
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";
API
New flexible modification/existing options
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. | |
|
Boolean |
false |
Set to true for disabling the StructureQuerySearch |
|
function, Array |
[] |
Allows user to initialize the search with selected values |
|
String, Component |
"Category" |
Allows user the change the header title of Category
|
|
String, Component |
"Operator" |
Allows user the change the header title of Operator
|
|
String, Component |
"Value" |
Allows user the change the header title of Value
|
|
Boolean |
"true" |
Allows user to enable/disable search drop-down header |
|
Boolean |
false |
Allows user to enable/disable operators in search |
|
Boolean |
true |
Allows user to clear all selected data |
onTokenRemove | Function |
Event handler triggered whenever a token is removed. | |
onEnter | Function |
Event handler triggered whenever Enter is pressed | |
onTokenAdd | Function |
Event handler triggered whenever a token is added. Params:
(addedToken)
|
|
|
function |
Event handler triggered whenever clear all button clicked | |
onOptionSelected | Function |
Event handler triggered whenever a user picks an option. | |
|
function |
Allows user to update the Options(props) at runtime, this function is called before onTokenRemove and onTokenAdd
|
|
|
String |
"No result found" |
This message is shown when dropdown doesn't have search value |
|
function, Component |
"Loading...." |
Show custom loader when values are retrieved using Ajax |
|
function |
Allows user to render custome Token Component | |
|
function |
Allows user to render custome Token Item | |
|
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. |
props.options (Data attributes)
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:
|
|
|
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 | |
|
Boolean |
false |
When this parameter is set to true , it allows you to send multiple custom values for type=textoptions
|
|
|
Boolean |
true |
Switch between unique/duplicate categories (key) |
|
|
Boolean |
false |
Switch between unique/duplicate values |
|
|
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
|
How to Contribute
Setting Up
Please run npm install
in the root and example folders. then do the following:
- Go to root folder and run
npm start
after this - Go to example folder and run
npm run link
(only for first time) - Go to example folder and run
npm start
it 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.
License
MIT © kevalbhatt