BaseAdvancedSearch

Props

Prop name	Description	Type	Values	Default
filterList	list of available filters, needs to be an array of objects with the following properties: label string - the label of the filter (displayed if not main search) - this prop can be customized by specifying labelPropertyName.filter. id string - the identifier of the filter (displayed if not main search) - this prop can be customized by specifying identifierPropertyName.filter. type string - the filter type. Possible values: text, chips, chipssingle, date, daterange. hidden boolean - filters with this attribute true will be filtered from displayed filter list. freetext_allowed boolean - determines if predetermined options from options property are used or autocomplete is used. options Object[] - for filter type chips and chipssingle the controlled vocabulary options. subsets string[] - if a filter of type 'text' or 'chips' with freetext_allowed (thus triggering autocomplete) has subordinate filters for which the autosuggest results should also be shown - add the filter identifiers here	array	-	[]
appliedFilters	possibility to set applied filters from outside, for necessary object properties see filterList (except options - this property is not necessary for applied filters)	array	-	[]
autocompleteResults	provide the component with the fetched autocomplete results (drop down options). this needs to be an object array with the properties specified in autocompletePropertyNames.	array	-	[]
defaultFilter	specify a default value for a filter that is set when none of the available filters is selected, should have the following properties: label string - the label of the filter (displayed if not main search) - this prop can be customized by specifying labelPropertyName.filter. id string - the identifier of the filter (displayed if not main search) - this prop can be customized by specifying identifierPropertyName.filter. type string - the filter type. Possible values: text, chips, chipssingle, date, daterange. options Object[] - for filter type chips and chipssingle the controlled vocabulary options. filter_values Object[], string[], Object - the values selected - object for date or array of objects or strings for type text, type chips and chipssingle, defaultFilter does not need the property subsets since results for all filters are shown per default	object	-	{ label: 'Fulltext', id: 'default', type: 'text', options: [], filter_values: [] }
language	specify a language (ISO 639-1) (used for label if label is language specific object e.g. { de: 'xxx', en: 'yyy' }).	string	-	''
isLoadingIndex	set the row loader from outside per row index	number	-	-1
advancedSearchText	specify informational texts for the component - this needs to be an object with the following properties (if you don't want to display any text leave an empty string): title: text shown as first line on the drop-down in filters area. subtext: text shown as second line on the drop-down in filters area. availableOptions: text shown with chips options for controlled vocabulary search. addFilter: text/label used for add filter icon. removeFilter: text/label used for remove filter icon. selectFilterLabel: label (not visible) used for filter chips input field. searchLabel: label (not visible) used for search input field. The values of this object might be plain text or a key for an i18n file. This prop can be ignored when the no-options slot is used.	object	-	{ title: 'Advanced Search', subtext: 'Select a filter', availableOptions: 'Available options', addFilter: 'Add filter', removeFilter: 'Remove filter', selectFilterLabel: 'Select filter', searchLabel: 'Search for Entries' }
dropDownInfoTexts	specify informational texts for the drop-down - this needs to be an object with the following properties: autocompleteNoOptions: info text shown when autocomplete search does not yield any results. autocompleteOngoing: info text displayed while autocomplete search is ongoing (and no previous results are displayed). autocompleteInitial: info text shown when user first opens the search component. chipsNoOptions: info text shown when no options for controlled vocabulary search are available (anymore). chipsMaxOptions: text displayed if more than max number of options that can be displayed are available (configure via prop maxNumberControlledOptions). chipsNoMatch: text displayed if string in input does not match any options. chipsOngoing: info text shown when controlled vocabulary chips are being fetched. The values of this object might be plain text or a key for an i18n file This prop can be ignored when the no-options slot is used.	object	-	{ autocompleteNoOptions: 'No matching options found', autocompleteOngoing: 'Autocomplete is being fetched...', autocompleteInitial: 'Please start typing or select a filter to see options', chipsNoOptions: 'No more options available', chipsMaxOptions: 'Please start typing to see options', chipsNoMatch: 'No matching options were found', chipsOngoing: 'Options are being loaded...' }
placeholder	add a placeholder for the search input, either a string used for every row or add separate values for main filter row and already added filters properties: filterRow: for already added filter rows. main: for the primary search input field. each of these specific placeholders can again be a string or an object with different placeholders for each search type (text, chips, date)	object|string	-	() => ({ filterRow: 'Add values to your filter', main: 'Search and Discover', })
identifierPropertyName	specify the object property that can be used for identification of filters, autocomplete options and controlled vocabulary options. Could be a string (used for all the mentioned objects) or an object with the following properties: filter: identifier property name in filter objects. autocompleteOption: identifier property name in autocomplete option objects. controlledVocabularyOption: identifier property name in controlled vocabulary option objects.	object|string	-	() => ({ filter: 'id', autocompleteOption: 'id', controlledVocabularyOption: 'id', })
labelPropertyName	specify the object property that should be used for label display of filters, autocomplete options and controlled vocabulary options. Could be a string (used for all the mentioned objects) or an object with the following properties: filter: label property name in filter objects. autocompleteOption: label property name in autocomplete option objects. controlledVocabularyOption: label property name in controlled vocabulary option objects.	object|string	-	() => ({ filter: 'label', autocompleteOption: 'title', controlledVocabularyOption: 'label', })
autocompletePropertyNames	autocomplete results need a label, and id and a data property that contains all the actual autocomplete results for that specific category TODO: make category optional	object	-	{ label: 'label', id: 'id', data: 'data' }
assistiveText	this prop gives the option to add assistive text for screen readers. properties: selectedOption: text read when a selected option is focused (currently only working for type chips with autocomplete (=freetext_allowed))	object	-	{}
applyBoxShadow	if desired the box shadow around the search rows can be deactivated here	boolean	-	true
dateFieldDelay	use this prop to set a delay in ms before date input calendar is displayed	number	-	0

Events

Event name	Properties	Description
update:applied-filters	undefined Filter[] - the list of updated applied filters	inform parent of changes in applied filters
fetch-autocomplete	searchString string - the string to autocomplete filter Filter - the filter object index number - the filter index of all filters (main and applied)	inform parent to fetch autocomplete data for the provided filter
search	undefined Filter[] - the updated list of applied filters	inform parent that search should be triggered

---

Demo

Search functionality with simple freetext and advanced search

To see autocomplete results try typing 'zentrum'.