Multi Search Bar

Overview

The Multi Search Bar allows let you switch between basic and advanced search. Both searches will let user to select a type from a dropdown list.

CHANGELOG.md contains Release Notes for this package.

CONTRIBUTING.md contains guidelines on how to help improve this package.

Installation

Run the following NPM command to install:

> npm install --save multi-search-bar

Run the following NPM command to launch a sample demo:

> npm start

This component is using configurable-form-builder too.

     <MultiSearchBar
              handleSearch={callback}
              options={options}
              advancedSearchAttributes={FORM_CONFIG}
              handleSelectedChange={this.onSelectedChange}
              messages={MESSAGES}/>

Property Name	Type	Required	Description	Default
handleSearch	Function	NO	when Search button is clicked	N/A
options	Array	NO	dropdown list fields, if not available, dropdown will be hidden. if empty array, still we see it	N/A
allowBlankBasicSearch	Boolean	NO	If you set to true, if the textbox is empty still can search	false
advancedSearchAttributes	Obj	NO	for form, if not available, there won't be advanced search button	N/A
handleSelectedChange	Function	NO	when dropdown is changed, this will trigger	N/A
defaultSearch	string	NO	the search which will be shown when opening the page (BASIC,ADVANCED)	BASIC
basicSearch	boolean	NO	you can specify false if you do not want to have basic search at all	true
advancedSearch	boolean	NO	You can specify false if you do not want advanced search at all	true
messages	Obj	NO	Language specific verbiage displayed by the controls in this component	See below

Property Name	Type	Required	Description	Default
basicSearchLabel	string	Yes	Basic/Advanced toggle: Basic	Basic
advancedSearchLabel	string	Yes	Basic/Advanced toggle: Advanced	Advanced
noAttrText	string	Yes	Display when advanced search has no form inputs defined	No searchable attributes for selected entity types
searchLabel	string	Yes	Search button text	Search
searchPlaceholder	string	Yes	Search input placeholder	Search...
selectSomeItems	string	Yes	Options Placeholder: when no items are selected	Select Some Items...
allItemsAreSelected	string	Yes	Options Placeholder: when all items are no selected	All Items Are Selected
selectAll	string	Yes	Option to select all options	Select All
search	string	Yes	Options search placeholder	Search

Example of form config:

{
  title: "Sample Config Form Title",
  fields: [
    {
      id: "id",
      type: "text",
      label: "Name"
    },
    {
      id: "options",
      type: "enum",
      label: "Status",
      values: ["option 1", "option 2", "option 3"]
    },
    {
      id: "non-text-attr",
      type: "long",
      label: "Non-Text Attr"
    }
  ],
  breakpoints: { 350: 1, 750: 2, 900: 3 }
}

Example of messages:

{
  basicSearchLabel: "Basic",
  advancedSearchLabel: "Advanced",
  noAttrText: "No searchable attributes for selected entity types",
  searchLabel: "Search",
  searchPlaceholder: "Search...",
  selectSomeItems: "Select Some Items...",
  allItemsAreSelected: "All Items Are Selected",
  selectAll: "Select All",
  search: "Search",
}