Components/Form components

EAutocomplete Autocomplete

import EUI 1.0

Examples

Autocomplete

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EAutocomplete { debounce: 250 highlightFirstItem: true fetchSuggestions: function(query, done) { done(["Qt", "QML", "Qt Quick", "Qt Creator"].filter(function(text) { return text.toLowerCase().indexOf(query.toLowerCase()) >= 0 })) } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Custom suggestions, loading and keyboard navigation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EAutocomplete { id: webUploadAutocomplete width: Math.min(420, parent.width) debounce: 120 showArrow: true highlightFirstItem: true textRole: "name" placeholderText: qsTr("Search cities and select with arrow keys") fetchSuggestions: function(query, callback) { const cities = [{name: "Shanghai", country: "China"}, {name: "Singapore", country: "Singapore"}, {name: "Seattle", country: "USA"}] Qt.callLater(function() { callback(cities.filter(function(city) { return city.name.toLowerCase().indexOf(query.toLowerCase()) >= 0 })) }) } optionDelegate: Component { EText { property var option property int optionIndex: -1 text: option ? option.name + " · " + option.country : "" } } headerDelegate: Component { EText { text: qsTr("City suggestions") leftPadding: 20 } } footerDelegate: Component { EText { leftPadding: 20 text: qsTr("↑ ↓ cycles through suggestions; Enter selects") } } loadingDelegate: Component { EText { horizontalAlignment: Text.AlignHCenter text: qsTr("Searching cities…") } } } EText { text: qsTr("Current text: ") + webUploadAutocomplete.text } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Input suggestions

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EAutocomplete { clearable: true model: ["QML", "Qt Quick", "Qt Widgets"] }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

accessibleNamestring

Name read by assistive technologies; provide a readable name for controls without text.

DefaultplaceholderText

appendComponentComponent

Component slot for custom input append area or list end; null uses the default content. See this page’s examples for delegate context.

Defaultnull

clearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CIRCLE_XMARK

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaultfalse

debounceint

Delay, throttling or automatic close time in milliseconds; 0 means no delay or no timed close.

Default300

echoModeenum

Display mode for the input text.

TextInput.Normal
TextInput.Password
TextInput.NoEcho
TextInput.PasswordEchoOnEdit

DefaultDynamic binding

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fetchSuggestionsvar

Suggestion callback (query, callback); call callback or return an array or Promise.

Defaultnull

fitInputWidthbool

Match the suggestion popup width to the input.

Defaulttrue

fontfont

Font settings for the family, size and text style.

Common fields:
family, pixelSize, pointSize
bold, italic, weight
underline, strikeout
letterSpacing, wordSpacing

Defaultapplication font

footerDelegateComponent

Component slot for custom footer; null uses the default content. See this page’s examples for delegate context.

Defaultnull

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

headerDelegateComponent

Component slot for custom header; null uses the default content. See this page’s examples for delegate context.

Defaultnull

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hideLoadingbool

Hide the loading indicator in suggestions.

Defaultfalse

highlightFirstItembool

Highlight the first suggestion when the list opens.

Defaultfalse

loadingbool

Whether the component is loading.

Defaultfalse

loadingDelegateComponent

Component slot for custom loading state; null uses the default content. See this page’s examples for delegate context.

Defaultnull

loopNavigationbool

Wrap keyboard navigation between first and last suggestions.

Defaulttrue

maximumLengthint

Maximum allowed input characters.

Default32767

modelvar

Component data source; item structure follows the current example and component contract.

Default[]

offsetint

Offset relative to layout, scroll target or popup reference, in pixels.

Default6

optionDelegateComponent

Component slot for custom option; null uses the default content. See this page’s examples for delegate context.

Defaultnull

parservar

Input parser converting displayed text to the underlying value.

Defaultnull

passwordVisiblebool

Display the password as plain text.

Defaultfalse

placeholderTextstring

Placeholder shown when the value is empty.

Default""

placementstring

Suggestion list position relative to the input.

"top" / "top-start"
"top-end" / "bottom"
"bottom-start" / "bottom-end"

Default"bottom-start"

popupMaxHeightint

Maximum suggestion popup height in pixels.

Default240

popupWidthint

Popup or menu width in pixels; 0 selects automatic width.

Default0

prefixComponentComponent

Component slot for custom prefix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

prefixIconint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

prependComponentComponent

Component slot for custom input prepend area; null uses the default content. See this page’s examples for delegate context.

Defaultnull

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaultfalse

selectWhenUnmatchedbool

Allow submitting entered text when no suggestion matches.

Defaultfalse

showArrowbool

Show the popup or tour arrow.

Defaultfalse

showPasswordbool

Enable password entry and visibility switching.

Defaultfalse

showWordLimitbool

Show the current character count and length limit.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

suffixComponentComponent

Component slot for custom suffix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

suffixIconint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

textstring

Displayed text.

Default""

textColorcolor

Text color.

DefaultDynamic binding

textRolestring

Object field used for text, values, child nodes or indentation.

Default"label"

triggerOnFocusbool

Query and display suggestions when the input gains focus.

Defaulttrue

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

valueKeyalias

Option value field or unique identifier for object values.

DefaultAlias: control.textRole

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

activatedboolRead only

Whether the autocomplete popup is activated.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

highlightedIndexintRead only

Keyboard-highlighted suggestion index.

DefaultComputed at runtime

inputRefvarRead only

Internal input reference for inspecting input state or managing focus.

DefaultComputed at runtime

popperRefvarRead only

Reference to the internal menu, popup or tooltip.

DefaultComputed at runtime

sourceItemsvarRead only

Normalized suggestion or selection options.

DefaultComputed at runtime

suggestionsvarRead only

Items returned by the current suggestion query.

DefaultComputed at runtime

wordCountintRead only

Current input character count.

DefaultComputed at runtime

showPasswordStrengthbool

Show strength and rule checks while a password input is focused.

Defaultfalse

passwordRulesvar

Password rules with label and minLength or pattern.

Default

Show default value

[ {label: ELocale.texts.PasswordLength, minLength: 8}, {label: ELocale.texts.PasswordUppercase, pattern: /[A-Z]/}, {label: ELocale.texts.PasswordLowercase, pattern: /[a-z]/}, {label: ELocale.texts.PasswordNumber, pattern: /[0-9]/}, {label: ELocale.texts.PasswordSymbol, pattern: /[^A-Za-z0-9]/} ]

passwordStrengthrealRead only

Fraction of passed password rules, from 0 to 1.

Default

Show default value

passwordRequirements.length ? passwordRequirements.filter(function(rule) { return rule.passed }).length / passwordRequirements.length : 0

passwordRequirementsvarRead only

Rule results with label and passed fields.

Default

Show default value

Array.isArray(passwordRules) ? passwordRules.map(function(rule) { let passed = false try { if (rule && rule.minLength !== undefined) passed = text.length >= Number(rule.minLength) else if (rule && rule.pattern) { const expression = new RegExp(rule.pattern) passed = expression.test(text) } } catch (error) { passed = false } return {label: rule && rule.label ? String(rule.label) : "", passed: passed} }) : []

Signals

SignaturePurpose

cleared()

Emitted after the contents are cleared with the clear action.

formatFailed(string message)

Emitted when input formatting fails; message explains why.

selected(var value)

Emitted when a suggestion is selected; value is the selected suggestion value.

searchFailed(string message)

Emitted when fetching suggestions fails; message explains why.

Methods

SignaturePurpose

blur()

Remove focus from the input.

close()

Close the component panel or popup.

open()

Open the component panel or popup.

getData(query)

Request autocomplete suggestions using query.

choose(index)

Choose the suggestion at index.

highlight(index)

Highlight the suggestion at index.

fetch(query)

Fetch autocomplete suggestions using query.