# react-structured-query-search > react-structured-query-search Latest version **1.0.0-alpha.5** (published 2019-06-03) · MIT license · 0 weekly downloads ## Install ```sh npm install react-structured-query-search pnpm add react-structured-query-search yarn add react-structured-query-search bun add react-structured-query-search ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-alpha.5 | | Published | 2019-06-03 | | First published | 2019-05-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=8 | | Dependencies | 6 | | Unpacked size | 1.6 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 11 | | Author | kevalbhatt | | Maintainers | kevalbhatt18 | ## Links - npm: https://www.npmjs.com/package/react-structured-query-search - Repository: https://github.com/kevalbhatt/react-structured-query-search - Homepage: https://github.com/kevalbhatt/react-structured-query-search#readme - Issues: https://github.com/kevalbhatt/react-structured-query-search/issues - npm.io page: https://npm.io/package/react-structured-query-search ## Dependencies (6) - [fuzzy](https://npm.io/package/fuzzy.md) ^0.1.3 - [moment](https://npm.io/package/moment.md) ^2.24.0 - [tether](https://npm.io/package/tether.md) ^1.4.6 - [node-sass](https://npm.io/package/node-sass.md) ^4.12.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.8.0 ## Recent versions - 1.0.0-alpha.5 (latest) — 2019-06-03 - 1.0.0-alpha (alpha) — 2019-05-14 - 1.0.0-alpha.4 — 2019-05-28 - 1.0.0-alpha.3 — 2019-05-23 - 1.0.0-alpha.2 — 2019-05-16 - 1.0.0-alpha.1 — 2019-05-16 - 1.0.0-alpha.0 — 2019-05-15 ## README # react-structured-query-search 🎉 [![NPM](https://img.shields.io/npm/v/react-structured-query-search.svg)](https://www.npmjs.com/package/react-structured-query-search) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) react-structured-query-search is a javascript library that provides autocomplete search queries. This was inspired by [visualsearch](http://documentcloud.github.io/visualsearch) and [react-structured-filter](https://github.com/SummitRoute/react-structured-filter) >This plugin is written on top of [react-structured-filter](https://github.com/SummitRoute/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](https://github.com/fmoo/react-typeahead), [react-structured-filter](https://github.com/SummitRoute/react-structured-filter) API(options) as they are. ## 🎉🎊 New Features 🎊🎉 * Ajax support to retrieve values. * Allows user to send values for Category in `Array` or `Array` * 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 ```bash npm install --save react-structured-query-search ``` ## Usage ([Example Code](https://github.com/kevalbhatt/react-structured-query-search/blob/master/example/src/App.js)) ([Demo](https://kevalbhatt.github.io/react-structured-query-search/)) If you want to use `Tokenizer` then you either import as follows: ```jsx import ReactStructuredQuerySearch from "react-structured-query-search"; import "react-structured-query-search/dist/index.css"; ``` #### or ```jsx 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: ```jsx 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.| | :new: **disabled** | `Boolean`| `false` | Set to `true` for disabling the StructureQuerySearch | | :new: **defaultSelected**| `function, Array` | `[]` | Allows user to initialize the search with selected values | | :new: **categoryHeader** | `String, Component` | `"Category"` | Allows user the change the header title of `Category` | | :new: **operatorHeader** | `String, Component` | `"Operator"` | Allows user the change the header title of `Operator` | | :new: **valueHeader** | `String, Component` | `"Value"` | Allows user the change the header title of `Value` | | :new: **isAllowSearchDropDownHeader** | `Boolean` | `"true"` | Allows user to `enable/disable` search drop-down header | | :new: **isAllowOperator** | `Boolean` | `false` | Allows user to `enable/disable` operators in search | | :new: **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)`
| | :new: **onClearAll** | `function`||Event handler triggered whenever clear all button clicked | | **onOptionSelected** |`Function`||Event handler triggered whenever a user picks an option.| | :new: **updateOptions** | `function` || Allows user to update the Options(props) at runtime, this function is called before `onTokenRemove` and `onTokenAdd` | | :new: **fuzzySearchEmptyMessage** | `String` | `"No result found"` | This message is shown when dropdown doesn't have search value | | :new: **renderLoading** | `function, Component` | `"Loading...."` | Show custom loader when values are retrieved using Ajax | | :new: **renderTokens** | `function` || Allows user to render custome Token Component| | :new: **renderTokenItem** | `function` || Allows user to render custome Token Item | | :new: **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.| ### 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:| | :new: **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 | | :new: **isAllowCustomValue** | `Boolean` |`false`||
When this parameter is set to `true`, it allows you to send multiple custom values for `type=textoptions`
| | :new: **isAllowDuplicateCategories** | `Boolean` | `true` || Switch between `unique/duplicate` categories (key) | | :new: **isAllowDuplicateOptions** | `Boolean` | `false` ||Switch between `unique/duplicate` values | | :new: **fuzzySearchKeyAttribute** | `String` |`name`|| If Category (options)values are `Array` 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](https://github.com/kevalbhatt) --- _Source: https://npm.io/package/react-structured-query-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._