<!--
|
* @Description:
|
* @version:
|
* @Author: chen jing wu
|
* @Date: 2023-04-25 17:41:26
|
* @LastEditors: chen jing wu
|
* @LastEditTime: 2023-05-04 13:56:11
|
-->
|
|
<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header -->
|
<template>
|
|
<!-- Header Label -->
|
<template if:true={label}>
|
<label class="slds-form-element__label">{label}</label>
|
</template>
|
<div class="slds-combobox_container">
|
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aria-expanded="true" aria-haspopup="listbox" role="combobox">
|
<!-- Search Input -->
|
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
|
<lightning-input data-id="myinput" disabled={disabled} class="inputBox" placeholder="--无--" onblur={blurEvent} onclick={showOptions} onkeyup={filterOptions} value={searchString} auto-complete="off" variant="label-hidden" id="combobox-id-1" required={isRequired}></lightning-input>
|
<lightning-icon class="slds-input__icon" icon-name="utility:down" size="x-small" alternative-text="search"></lightning-icon>
|
</div>
|
<!-- Dropdown List -->
|
<template if:true={showDropdown}>
|
<div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid"><!--style="{! 'max-height:' + (8 + (v.recordCount * 40)) + 'px' }""-->
|
<ul class="slds-listbox slds-listbox_vertical recordListBox" role="presentation">
|
<template if:false={message} >
|
<template for:each={optionData} for:item="option">
|
<template if:true={option.isVisible}>
|
<li key={option.value} data-id={option.value} onmousedown={selectItem} class="slds-listbox__item eachItem">
|
<template if:true={option.selected}>
|
<lightning-icon icon-name="utility:check" size="x-small" alternative-text="icon" ></lightning-icon>
|
</template>
|
<span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{option.label}</span>
|
</li>
|
</template>
|
</template>
|
</template>
|
<template if:true={message} >
|
<li class="slds-listbox__item">
|
<span class="slds-media slds-listbox__option_entity verticalAlign slds-truncate">{message}</span>
|
</li>
|
</template>
|
</ul>
|
</div>
|
</template>
|
</div>
|
</div>
|
<!-- Multi Select Pills -->
|
<template for:each={optionData} for:item="option">
|
<template if:true={option.selected}>
|
<lightning-pill key={option.value} class="slds-m-around_xx-small" name={option.value} label={option.label} onremove={removePill}></lightning-pill>
|
</template>
|
</template>
|
</template>
|
