salesforce 自定义customlookup供参考

 上面截图是放在home page 上如果需要可以放在任意地方。

如果需要将label放在左侧可以将parent div属性加：slds-form-element_horizontal

这样就是横着方。下面是demo

 

 HTML Javascript Apex:

<template>
    <div class="slds-form-element" onmouseleave={toggleResult}  data-source="lookupContainer"> 
        <label class="slds-form-element__label" for="combobox-id-1">{label}</label>
        <div class="slds-form-element__control">
            <div class="slds-combobox_container">
                <div class="lookupInputContainer slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox"> 
                 <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right" role="none">
                    <div class="searchBoxWrapper slds-show">
                      <!--Lookup Input Field-->
                      <lightning-input                   
                         data-source="searchInputField"
                         onclick={toggleResult}
                         onchange={handleKeyChange}
                         is-loading={isSearchLoading}
                         value={searchKey}
                         variant="label-hidden"
                         placeholder={placeholder}
                     ></lightning-input>  
                     <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:search"></lightning-icon>
                    </div>
                    
                  <!--Lookup Selected record pill container start-->  
                  <div class="pillDiv slds-hide">        
                    <span class="slds-icon_container slds-combobox__input-entity-icon">
                      <lightning-icon icon-name={iconName} size="x-small" alternative-text="icon"></lightning-icon>  
                    </span>
                    <input type="text"
                           id="combobox-id-1"
                           value={selectedRecord.Name}       
                           class="slds-input slds-combobox__input slds-combobox__input-value"
                           readonly
                           />
                    <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Remove selected option">
                    <lightning-icon icon-name="utility:close" size="x-small" alternative-text="close icon" onclick={handleRemove}></lightning-icon> 
                   </button>
                  </div>  
                  </div>
              
                  <!-- lookup search result part start-->
                  <div style="margin-top:0px" id="listbox-id-5" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
                    <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                      <template for:each={lstResult} for:item="obj">
                      <li key={obj.Id} role="presentation" class="slds-listbox__item">
                        <div data-recid={obj.Id} onclick={handelSelectedRecord} class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                          <span style="pointer-events: none;" class="slds-media__figure slds-listbox__option-icon" >
                            <span class="slds-icon_container" >
                                <lightning-icon icon-name={iconName} size="small" alternative-text="icon" ></lightning-icon>  
                            </span>
                          </span>
                          <span style="pointer-events: none;" class="slds-media__body" >
                            <span  class="slds-listbox__option-text slds-listbox__option-text_entity">{obj.Name}</span>
                          </span>
                        </div>
                      </li>
                      </template>
                      <!--ERROR msg, if there is no records..-->
                      <template if:false={hasRecords}>
                        <li class="slds-listbox__item" style="text-align: center; font-weight: bold;">No Records Found....</li>
                      </template>
                    </ul>
                   
                  </div>
                </div>
              </div>
        </div>     
    </div>
</template>

/*
API : 50
Source : lwcFactory.com
*/
import { LightningElement,api,wire} from 'lwc';
// import apex method from salesforce module 
import fetchLookupData from '@salesforce/apex/CustomLookupLwcController.fetchLookupData';
import fetchDefaultRecord from '@salesforce/apex/CustomLookupLwcController.fetchDefaultRecord';

const DELAY = 300; // dealy apex callout timing in miliseconds  

export default class CustomLookupLwc extends LightningElement {
    // public properties with initial default values 
    @api label = 'custom lookup label';
    @api placeholder = 'search...'; 
    @api iconName = 'standard:account';
    @api sObjectApiName = 'Account';
    @api defaultRecordId = '';

    // private properties 
    lstResult = []; // to store list of returned records   
    hasRecords = true; 
    searchKey=''; // to store input field value    
    isSearchLoading = false; // to control loading spinner  
    delayTimeout;
    selectedRecord = {}; // to store selected lookup record in object formate 

   // initial function to populate default selected lookup record if defaultRecordId provided  
    connectedCallback(){
         if(this.defaultRecordId != ''){
            fetchDefaultRecord({ recordId: this.defaultRecordId , 'sObjectApiName' : this.sObjectApiName })
            .then((result) => {
                if(result != null){
                    this.selectedRecord = result;
                    this.handelSelectRecordHelper(); // helper function to show/hide lookup result container on UI
                }
            })
            .catch((error) => {
                this.error = error;
                this.selectedRecord = {};
            });
         }
    }

    // wire function property to fetch search record based on user input
    @wire(fetchLookupData, { searchKey: '$searchKey' , sObjectApiName : '$sObjectApiName' })
     searchResult(value) {
        const { data, error } = value; // destructure the provisioned value
        this.isSearchLoading = false;
        if (data) {
             this.hasRecords = data.length == 0 ? false : true; 
             this.lstResult = JSON.parse(JSON.stringify(data)); 
         }
        else if (error) {
            console.log('(error---> ' + JSON.stringify(error));
         }
    };
       
  // update searchKey property on input field change  
    handleKeyChange(event) {
        // Debouncing this method: Do not update the reactive property as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        this.isSearchLoading = true;
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        this.delayTimeout = setTimeout(() => {
        this.searchKey = searchKey;
        }, DELAY);
    }


    // method to toggle lookup result section on UI 
    toggleResult(event){
        const lookupInputContainer = this.template.querySelector('.lookupInputContainer');
        const clsList = lookupInputContainer.classList;
        const whichEvent = event.target.getAttribute('data-source');
        switch(whichEvent) {
            case 'searchInputField':
                clsList.add('slds-is-open');
               break;
            case 'lookupContainer':
                clsList.remove('slds-is-open');    
            break;                    
           }
    }

   // method to clear selected lookup record  
   handleRemove(){
    this.searchKey = '';    
    this.selectedRecord = {};
    this.lookupUpdatehandler(undefined); // update value on parent component as well from helper function 
    
    // remove selected pill and display input field again 
    const searchBoxWrapper = this.template.querySelector('.searchBoxWrapper');
     searchBoxWrapper.classList.remove('slds-hide');
     searchBoxWrapper.classList.add('slds-show');

     const pillDiv = this.template.querySelector('.pillDiv');
     pillDiv.classList.remove('slds-show');
     pillDiv.classList.add('slds-hide');
    }

    // method to update selected record from search result 
    handelSelectedRecord(event){   
        var objId = event.target.getAttribute('data-recid'); // get selected record Id 
        this.selectedRecord = this.lstResult.find(data => data.Id === objId); // find selected record from list 
        this.lookupUpdatehandler(this.selectedRecord); // update value on parent component as well from helper function 
        this.handelSelectRecordHelper(); // helper function to show/hide lookup result container on UI
    }

    /*COMMON HELPER METHOD STARTED*/
    handelSelectRecordHelper(){
        this.template.querySelector('.lookupInputContainer').classList.remove('slds-is-open');

        const searchBoxWrapper = this.template.querySelector('.searchBoxWrapper');
        searchBoxWrapper.classList.remove('slds-show');
        searchBoxWrapper.classList.add('slds-hide');

        const pillDiv = this.template.querySelector('.pillDiv');
        pillDiv.classList.remove('slds-hide');
        pillDiv.classList.add('slds-show');     
    }

    // send selected lookup record to parent component using custom event
    lookupUpdatehandler(value){    
            const oEvent = new CustomEvent('lookupupdate',
            {
                'detail': {selectedRecord: value}
            }
        );
        this.dispatchEvent(oEvent);
    }


}

Apex:

/*
API : 50
Source : lwcFactory.com
*/
public class CustomLookupLwcController {
    // Method to fetch lookup search result   
     @AuraEnabled(cacheable=true)
     public static list<sObject> fetchLookupData(string searchKey , string sObjectApiName) {    
         List < sObject > returnList = new List < sObject > ();
 
         string sWildCardText = '%' + searchKey + '%';
         string sQuery = 'Select Id,Name From ' + sObjectApiName + ' Where Name Like : sWildCardText order by createdDate DESC LIMIT 5';
         for (sObject obj: database.query(sQuery)) {
             returnList.add(obj);
         }
         return returnList;
     }
     
     // Method to fetch lookup default value 
     @AuraEnabled
     public static sObject fetchDefaultRecord(string recordId , string sObjectApiName) {
         string sRecId = recordId;    
         string sQuery = 'Select Id,Name From ' + sObjectApiName + ' Where Id = : sRecId LIMIT 1';
         for (sObject obj: database.query(sQuery)) {
             return obj;
         }
         return null;
     }
     
 }