liuyn
2024-03-11 a87f1c3df03078814ee97ad0c8ac200a232419e9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!--
 * @Description: 
 * @version: 
 * @Author: chen jing wu
 * @Date: 2023-05-25 13:59:44
 * @LastEditors: chen jing wu
 * @LastEditTime: 2023-11-10 20:58:26
-->
<template>
    <div data-id="myInput">
        <div class="slds-form-element">
           <div class="slds-form-element__control">
              <div class="slds-combobox_container">
                 <div class="slds-combobox" aria-expanded="false" aria-haspopup="listbox" role="combobox">
                    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                       <template if:false={recordselected}>
                          <input class="slds-input slds-combobox__input" id="combobox-id-1" aria-autocomplete="list" aria-controls="listbox-id-1"
                             role="textbox" type="text" placeholder="Search..."   oninput={onKeyChange} value={selectedValue}/ disabled={disabled} onclick={onKeyChange} onblur={clear}>
                       </template>
                       <template if:true={recordselected}>
                          <span class="slds-pill slds-pill_link fullWidth slds-input slds-combobox__input"> 
                           
                             <a href="javascript:void(0);"
                                class="slds-pill__action slds-p-left_x-small" title={selectedValue} style="height: 32px;">
                                <div style="width: 80%;">
                                 <lightning-icon icon-name={iconname} size="x-small"></lightning-icon>
                                <!-- <span class="slds-pill__label slds-p-left_x-small" style="display: inline-flex;max-width:185px">{selectedValue}</span> -->
                                <!-- <lightning-formatted-text class="slds-pill__label slds-p-left_x-small" style="display: inline-flex;max-width:185px" value={selectedValue}></lightning-formatted-text> -->
                                <div data-id="qwe" class="slds-pill__label slds-p-left_x-small" style="display: inline-flex;max-width:185px">{selectedValue}</div>
                                </div>
                                
                             </a>
                             <button onclick={clearSelection}
                             class="slds-button slds-button_icon slds-button_icon slds-pill__remove" 
                             title="Remove">
                             <lightning-icon icon-name="utility:close" size="small" 
                                         alternative-text="Press delete or backspace to remove"></lightning-icon>
                                <span class="slds-assistive-text" >Remove</span>
                             </button>
                          </span>
                       </template>
                    </div>
                    <template if:true={recordsList}>
                       <div onmousedown={dontClose} class="slds-combobox_container">
                          <div id="listbox-id-1" class="slds-dropdown slds-dropdown_fluid slds-dropdown_autocomplete" role="listbox" style=" overflow: auto;">
                             <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                                <template for:each={recordsList} for:item="item">
                                   <li key={item.Id} role="presentation" class="slds-listbox__item">
                                      <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option"
                                         data-itemid = {item.Id} data-itemname={item.Name} onclick={setSelectedValue}>
                                         <span role="menuitem" tabindex="-1" data-itemid = {item.Id} data-itemname={item.Name}>
                                            <lightning-icon icon-name={iconname} size="x-small" data-itemid = {item.Id} data-itemname={item.Name}></lightning-icon> {item.Name}
                                         </span>
                                      </div>
                                   </li>
                                </template>
                             </ul>
                          </div>
                       </div>
                    </template>
                 </div>
              </div>
           </div>
        </div>
     </div>  
</template>