component(
ref="formEl"
:is="formRegister ? 'w-form-element' : 'div'"
v-bind="formRegister && { validators, inputValue: selectionValue, disabled: isDisabled, readonly: isReadonly, isFocused, noBlurValidation }"
v-model:valid="valid"
@reset="onReset"
:wrap="hasLabel && labelPosition !== 'inside'"
:class="classes"
:style="$attrs.style")
template(v-if="labelPosition === 'left'")
label.w-autocomplete__label.w-autocomplete__label--left.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}
w-menu(
ref="menu"
v-model="menuOpen"
@close="onMenuClose"
:menu-class="`w-autocomplete__menu${menuClass ? ' ' + menuClass : ''}`"
transition="slide-fade-down"
:append-to="menuPropsComputed.appendTo"
align-left
custom
min-width="activator"
v-bind="menuPropsComputed")
.w-autocomplete__input-wrap(
@click="!isDisabled && !isReadonly && onWrapClick()"
:class="inputWrapClasses")
slot(name="icon-left")
w-icon.w-autocomplete__icon.w-autocomplete__icon--inner-left(
v-if="innerIconLeft"
tag="label"
:for="inputId"
@click.stop="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
template(v-if="selection.length")
.w-autocomplete__selection(v-for="(item, i) in selection" :key="item.uid")
slot(name="selection" :item="item" :unselect="() => unselectItem(i)")
span(v-html="item[itemLabelKey]")
w-button(@click.stop="unselectItem(i)" icon="wi-cross" xs text color="currentColor")
.w-autocomplete__placeholder(
v-if="!selection.length && !keywords && placeholder && !showFloatingLabel"
v-html="placeholder")
input.w-autocomplete__input(
ref="input"
:id="inputId"
:value="keywords"
:name="inputName"
:disabled="isDisabled || null"
:readonly="isReadonly || null"
:tabindex="tabindex || null"
v-on="inputEventListeners"
v-bind="inputAttrs")
template(v-if="labelPosition === 'inside' && showLabelInside")
label.w-autocomplete__label.w-autocomplete__label--inside.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}
slot(name="icon-right")
w-icon.w-autocomplete__icon.w-autocomplete__icon--inner-right(
v-if="innerIconRight"
tag="label"
:for="inputId"
@click.stop="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
template(#content)
.w-autocomplete__list-wrap(
ref="listWrap"
@mousedown.capture="menuIsBeingClicked = true"
@mouseup.capture="setEndOfMenuClick"
@touchstart.capture="menuIsBeingClicked = true"
@touchend.capture="setEndOfMenuClick")
w-list.w-autocomplete__list(
v-if="filteredItems.length"
ref="list"
:items="listItems"
:model-value="null"
:item-label-key="itemLabelKey"
:item-value-key="itemValueKey"
:color="color"
:selection-color="color"
@item-select="onListItemSelect")
template(#item="{ item }")
slot(name="item" :item="item" :highlighted="highlightedItem === item.uid")
span(v-html="item[itemLabelKey]")
.w-autocomplete__no-match(
v-if="!filteredItems.length"
:class="{ 'w-autocomplete__no-match--default': !$slots['no-match'] }")
slot(name="no-match")
.caption(v-html="noMatch ?? 'No match.'")
.w-autocomplete__extra-item(
v-if="$slots['extra-item']"
@click.stop="selectExtraItem"
:class="{ highlighted: highlightedItem === 'extra-item' }")
slot(name="extra-item")
template(v-if="labelPosition === 'right'")
label.w-autocomplete__label.w-autocomplete__label--right.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}