query-searchbox
v1.0.0
Published
An Advanced Query-like SearchBox for react
Downloads
1
Maintainers
Readme
Query-SearchBox
The Advanced Query-like SearchBox for React. (inspired by JQL)
Query-searchbox helps you develop powerful query-like searches and get the results either locally or from the server
Query-searchbox is highly flexible and customizable, offering numerous props and methods to control the query and customize the style
How this package works ?
This package detects the user step based on the inputValue and displays the corresponding items in the menu. steps are:
1- filters 2- filterTypes 3- filterValues 4- operators
Props
Required props :
filters
- is an array of all the filters you want to search based on. For exapmle : ["province" , "country"]filterTypes
- is an array that contains all the types of filters you want to search based on. For example: ["=", "!=", "contains"]filterValues
- is an array that contains all the options you want to suggest to the user for filtering results based on . For example: ["iran" , "japan"]operators
- is an array of all operators to combine multiple filters together . For example: ["AND" , "OR"]onClick
- a function that is called whenever the user clicks on the search button and will return the input value .
Optional props :
button props :
buttonTitle
buttonTitleColor
buttonbackgroundColor
buttonHeight
buttonWidth
buttonFontSize
input props :
inputPlaceHolder
inputBackgroundColor
inputWidth
inputHeight
inputFontSize
inputColor
other props :
localSearchOnSteps
- if you want to perform a local search on each step, pass the steps as an array of numbers, such as [1 , 3].menuValues
- an array of strings, where each string represents one row in the menu. For example: ['value1', 'value2'].menuLoading
- Show a loading spinner in the dropdown menu. The default value is false.onSelect
- a function that subscribes to selected item in menu.onStepChange
- a function that subscribes to step changes.onInputChange
- a function that subscribes to input changes.onCurrentChange
- a function that subscribes to changes in the current value within that step