EnTypeahead

Preview

Props

Name	Description	Default	Control
minChar	Minimum characters that need to be typed to start fetching data. number	2
filterJson	Optional function that can be used to customize the response data directly after being fetched. Accepts one argument which is the response data. Function	null
getValue	Sets the key to be used for populating what gets shown in the dropdown from the response data. Required if the response data are objects. string	null
idValue	Sets the key for where the list of data is in the response. string	"Id"
listLocation	Sets the key for where the list of data is in the response. string	null
maxResults	Sets the maximum number of items to show in the dropdown list. This does not get sent to the server, that should be done in the additionalParams prop. number	null
requestDebounce	Sets debounce timer in between key strokes in milleseconds. number	300
jsonData	Provides typeahead with static data to be searched instead of using a network call. Record<string, any> | unknown[]	null
url	URL used for network call. Using as a function, the query value is passed as a param so that it can be constructed in the URL for each call. string | Function	unknown
httpVerb	Method used for network calls. string	"POST"	POSTGET
queryParam	Key value used for sending the query value. string	"s"
additionalParams	Additional key-value pairs to be sent with the network call. Record<string, any>	unknown
fetchOptions	Additional options that can be added to the network call. See https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters Record<string, any>	unknown
showSearchSymbol	Adds search icon as an input-group addon. boolean	false	truefalse
autocomplete	Set to true to use as basic autocomplete using static json data. boolean	false	truefalse
iconClass	Icon CSS class for search symbol. string	"icon-search"
showAllOnFocus	Shows dropdown with static data on focus of the text input. boolean	false	truefalse
fullWidthDropdown	Sets the dropdown width to extend to the end of the text input no matter what the results are. boolean	true	truefalse
wrapDropdownText	Wraps the dropdown item text if it is longer than the width of the text input. boolean	true	truefalse
matchSorting	Applies additional sorting of the results using match-sorter. See https://www.npmjs.com/package/match-sorter. boolean	true	truefalse
infoMessage	Adds an additional message that can be displayed if there are no results yet and the text input is focused. string	""
searchOnEnter	Only searches when enter key is pressed or button is clicked. boolean	false	truefalse
value	Used for a raw value passed into the input. string | number	unknown
name	Sets name attribute for the input. Required for proper form handling. string	null
id	Sets id attribute for input. If left blank, it will default to the name prop. This should always be matched to a label's "for" attribute for proper accessibility. string	null
placeholder	Sets the placeholder value. string	null
label	Used to describe field in error message string	null
disabled	Sets the disabled attribute. boolean	null	truefalse
required	Sets the field to required. boolean	false	truefalse
typeCast	Used to specifically validate different types. string	"string"
mode	Sets when and how often validation occurs. TODO: create docs for modes string	"eager"
displayOnly	Displays the value of the field in a span element, instead of as an input. boolean	false	truefalse
rules	A pipe separated string of validation rules for the field. View validation rules string	""
renderInForm	Prevents a field from being rendered at all when used in the fields prop of the EnForm component. Can be passed a function that returns true or false for conditional validation. boolean | Function	true	truefalse
renderInTable	Prevents a field from generating a column/heading in the EnTableBasic component. Can be passed a function that returns true or false for conditional validation. boolean | Function	true	truefalse
customMessages	Provide a custom error messages by rule. Should be an object with keys that match the rule name and value being a string of the message to display. Record<string, any>	null

Slots

display

No description

Variables

Name	Type	Description
value	unknown	—

addon-before

No description

addon-after

No description

Events

select

No description

update:results

No description

Methods

Name	Description
clearInput	Clears out the text in the input. Can also be achieved by binding v-model and setting that to an empty string.
focusInput	Focuses the typeahead input element. Also callable via the alias focus().

Examples

Using JSON data