123

chenjingwu

2024-04-11 d29f75b84fccd06917fb8e2c2ee70e9d76f868cd

 force-app/main/default/lwc/multiSelectCombobox/multiSelectCombobox.html

@@ -4,7 +4,7 @@
 * @Author: chen jing wu
 * @Date: 2023-04-25 17:41:26
 * @LastEditors: chen jing wu
 * @LastEditTime: 2023-04-25 17:45:57
 * @LastEditTime: 2023-10-16 13:23:10
-->

<!-- Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header -->
@@ -12,27 +12,32 @@
    
    <!-- Header Label -->
    <template if:true={label}>
        <label class="slds-form-element__label">{label}</label>
        <label class="slds-form-element__label">
            <span style="color:red;font-size: 10px;">*</span>
            {label}</label>
    </template>
    <div class="slds-combobox_container">
    <div data-id="myinput" 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 disabled={disabled} class="inputBox" placeholder="Select an Option" onblur={blurEvent} onclick={showOptions} onkeyup={filterOptions} value={searchString} auto-complete="off" variant="label-hidden" id="combobox-id-1" ></lightning-input>
                <lightning-icon class="slds-input__icon" icon-name="utility:down" size="x-small" alternative-text="search"></lightning-icon>
                <lightning-input  data-id="myinput" disabled={disabled} onblur={blurEvent} class="inputBox" placeholder={placeholder}  onclick={showOptions} onkeyup={filterOptions} value={searchString} auto-complete="off" variant="label-hidden" id="combobox-id-1"></lightning-input>
                <lightning-icon class="slds-input__icon slds-input__icon_right slds-icon-utility-down slds-icon_container" 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' }""-->
                <div onmousedown={dontClose} onopen={handlePayModeOpen} data-id=“scrollSec” id="listbox-id-1" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid"  role="listbox"><!--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 key={option.value} data-id={option.value} onclick={selectItem} class="slds-listbox__item eachItem">
                                        <div id="option724" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
                                            <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>
                                        </div>
                                        
                                    </li>
                                </template>
                            </template>
@@ -47,6 +52,9 @@
            </template>
        </div>
    </div>
    <template if:true={errorFlag}>
        <div style="color:#BA0517;font-size:12px">填写此字段。</div>
    </template>
    <!-- Multi Select Pills -->
    <template for:each={optionData} for:item="option">
        <template if:true={option.selected}>