<template>
|
<div>
|
<div class="slds-form-element">
|
<div class="slds-form-element__control">
|
<div class="slds-combobox_container">
|
<div id="box" class={boxClass} aria-expanded="true" aria-haspopup="listbox" role="combobox">
|
{searchLabel}
|
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
|
<template if:true={isValue}>
|
<div id="lookup-pill" class="slds-pill-container" style="position: relative;">
|
<lightning-pill label={valueObj} name={valueObj} onremove={handleRemovePill} disabled={disabled} onhover={onHover}>
|
<lightning-icon icon-name={iconName} alternative-text="acc" disabled={disabled}></lightning-icon>
|
</lightning-pill>
|
</div>
|
</template>
|
<template if:false={isValue}>
|
<div class="slds-p-top_none">
|
<lightning-input class={inputClass} type="search" id="input" value={searchTerm}
|
onclick={handleClick} onchange={searchChange} onblur={onBlur} disabled={disabled}
|
variant="label-hidden" autocomplete="off" placeholder="Search..." label='account search'>
|
</lightning-input>
|
</div>
|
</template>
|
</div>
|
<div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox"
|
onmouseleave={handleMouseleave} onmouseenter={handleMouseenter}>
|
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
|
<template for:each={options} for:item="item">
|
<li key={item.Id} onclick={onSelect} data-id={item.Id} data-name={item.name} role="presentation">
|
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option">
|
<lightning-icon class="slds-icon slds-icon--small slds-icon-text-default" icon-name={iconName} alternative-text={objName} size="small"></lightning-icon>
|
<span class="slds-truncate">{item.Name}</span>
|
</span>
|
</li>
|
</template>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
