I have created a text box "Customer Entererd Location Name" and want this picklist to look up to user location and do an auto search . It should show up all the existing location when user enters keystroke in this text box. Need to have a textbox where users can enter a location and enable an auto-complete feature on keystroke to show the location based on logged in user account associated ebs id and product type from location master2 object.
.
html
<template>
<lightning-card title="Claims Details New Section">
<lightning-record-edit-form object-api-name="Case" onsuccess={handleSuccess} onsubmit ={handleSubmit}>
<lightning-input-field field-name='Product1__c' value={op1}
variant="label-stacked"
onchange={handleselect} required></lightning-input-field>
<div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class={txtclassname} data-id="resultBox" aria-expanded="false" aria-haspopup="listbox" role="combobox">
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon slds-input-has-icon_left-right" role="none">
<div>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon iconheight">
<lightning-icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" icon-name={iconName} size="x-small" alternative-text="icon" ></lightning-icon>
</span>
</div>
<lightning-input required={required} read-only={inputReadOnly} data-id="userinput" label='Customer Entered Location Name' name="searchText" onchange={searchField} value={selectRecordName} onblur={manual} style="padding-left:30px" class="leftspace" autocomplete="off" onclick={searchField}></lightning-input>
<!--- <lightning-button label="Click To Allow Custom Location Name" onclick={allowcustom}></lightning-button>
--><div if:true={iconFlag}>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight">
<lightning-icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" icon-name="utility:search" size="x-small" alternative-text="icon" ></lightning-icon>
</span>
</div>
<div if:true={clearIconFlag}>
<button class="slds-input__icon slds-input__icon_right slds-button slds-button_icon iconheight" onclick={resetData}>
<lightning-icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" icon-name="utility:clear" size="x-small" alternative-text="icon" ></lightning-icon>
<span class="slds-assistive-text">Clear</span></button>
</div>
</div>
<!-- Second part display result -->
<div id="listbox-id-1" 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={searchRecords} for:item="serecord">
<li role="presentation" class="slds-listbox__item" key={serecord.Id}>
<div data-id={serecord.Id} data-name={serecord.Customer_Entered_Location_Name__c} onclick={setSelectedRecord} class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account">
<lightning-icon icon-name={iconName} class="slds-icon slds-icon slds-icon_small slds-icon-text-default" size="x-small"></lightning-icon>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">{serecord.Customer_Entered_Location_Name__c}</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{objectName} • {serecord.Customer_Entered_Location_Name__c} • Branch Name • {serecord.Brink_s_Servicing_Branch__c}</span>
</span>
</span>
</div>
</li>
</template>
</ul>
</div>
<div if:true={messageFlag}>
No result found.
</div>
<div if:true={LoadingText}>
Loading...
</div>
</div>
</div>
</div>
</div>
</div>
<lightning-input-field field-name='Brink_s_Servicing_Branch__c'></lightning-input-field>
<lightning-input-field field-name='of_Locations__c'></lightning-input-field>
<lightning-input-field field-name='Date_of_Service__c'></lightning-input-field>
<lightning-input-field field-name='Date_Loss_Recognized__c'></lightning-input-field>
<lightning-input-field field-name='Dollar_Amount_of_Claim__c'></lightning-input-field>
<lightning-input-field field-name='Type_of_Variance__c'></lightning-input-field>
<lightning-input-field field-name='Description'></lightning-input-field>
<lightning-input-field field-name='PortalEmailReceivers__c'></lightning-input-field>
<lightning-button label="Previous" variant="brand" type="submit" onclick={handleSave}></lightning-button>
<lightning-button label="Save" variant="brand" type="submit" onclick={handleSave}></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>
}
else{
element.fieldset[y].value=this.fname;
element.fieldset[y].required=false;
}
}
//Brink_s_Courier__c
if(element.fieldset[y].fun=="this.handleChange" ||element.fieldset[y].field=='Brink_s_Courier__c')
{
element.fieldset[y].fun=this.handleChange;
}
}
this.field.push(element);
}
});
// this.field=x;
console.log("locerr",error);
});
}
else{
var res=this.cjson;
this.locid='';
this.branchname='';
this.Address='';
// this.fname='';
this.branchId='';
this.field=[];
res.forEach(element => {
// if(element.op1.replace(/\s+/g, ' ').trim()==this.op1.replace(/\s+/g, ' ').trim()&&element.op2==this.op2.replace(/\s+/g, ' ').trim() && element.op3.replace(/\s+/g, ' ').trim()==this.op3.replace(/\s+/g, ' ').trim())
{
// alert(JSON.stringify(element));
console.log("Eselected",JSON.stringify(element));
for(var y=0;y<element.fieldset.length;y++)
{
if(element.fieldset[y].value=="this.locid"||element.fieldset[y].field=='ATM_Location_Name__c'||element.fieldset[y].field=='Requestors_Location_ID__c')
{
element.fieldset[y].value=this.locid;
}
if(element.fieldset[y].value=="this.branchname" ||element.fieldset[y].field=='Brinks_Branch_Name__c')
{
element.fieldset[y].value=this.branchId;
}
// if(element.fieldset[y].value=="this.Address" ||element.fieldset[y].field=='Address_of_Service_Location__c'|| element.fieldset[y].field=='Service_Location_Address__c')
// {
// element.fieldset[y].value=this.Address;
// }
// if(element.fieldset[y].value=="this.fname" ||element.fieldset[y].field=='Financial_Institution__c')
{
if(this.fname)
{
element.fieldset[y].value=this.fname;
}
else{
element.fieldset[y].value=this.fname;
element.fieldset[y].required=false;
}
}
//Brink_s_Courier__c
if(element.fieldset[y].fun=="this.handleChange" ||element.fieldset[y].field=='Brink_s_Courier__c')
{
element.fieldset[y].fun=this.handleChange;
}
}
this.field.push(element);
}
})
}
}
setVal(event)
{
console.log("222event",event.target.name);
if(event.target.name=="locid")
{
this.val=this.locid;
}
if(event.target.name=="branchname")
{
this.val=this.branchname;
}
//branchname
}
handleChange(event)
{
this.value=event.detail.value
//console.log("h1"+event.detail.name)
if(this.value=='No')
{
this.ncourf=true;
}
else if(this.value=='Yes'){
this.ncourf=false;
}
}
handleSuccess2(event)
{
console.log("111data",JSON.stringify(event.detail.fields));
// this.s2=false;
this.loaded=true;
var x=event.detail.fields;
event.preventDefault();
//x.branchId=this.branchid;
x.contact=this.contactid;
x.account=this.account.Id;
x.lname=this.branchname;
x.location_id=this.alocid;
x.phonenumber=this.user.Phone;
x.accname=this.account.Name;
x.ctype=this.op3;
x.Product1__c=this.op1;
//x.Category__c=this.op2;
x.Brinks_Branch_Name__c=this.branchId?this.branchId:x.Brinks_Branch_Name__c;
x.Customer_Entered_Location_Name__c=this.lname;
console.log("req12"+JSON.stringify(x))
createCase({params:JSON.stringify(x)}).then((res)=>{
console.log("post",res);
this.loaded=false;
this.rid=JSON.parse(res)[0].Id;
this.c=JSON.parse(res)[0];
this.s2=false;
})
}
/*get acceptedFormats() {
return ['.pdf', '.png','.jpg','.jpeg'];
}*/
finish(event)
{
this.s3=false;
const toastEvnt = new ShowToastEvent( {
title: 'Service Request Created Successfully!',
message: "Case Id:"+ this.rid,
variant: 'success' ,
});
this.dispatchEvent (toastEvnt);
}
prev(event)
{
this.d=true;
this.field=[];
this.ncourf=false;
this.dcheck=true;
this.mp=false;
this.op1='';
}
prev1(event)
{
this.s2=true;
this.d=false;
}
cnavigate()
{
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: `/case/${this.rid}`
}
}
// false // Replaces the current page in your browser history with the URL
);
}
/*--- adding autosearch feature ----*/
searchField(event) {
var currentText = event.target.value;
this.LoadingText = true;
this.inputReadOnly=false;
console.log("etext",currentText);
console.log("ebs"+this.registry_EBS_id)
this.currenttext2=event.target.value;
console.log("ptype"+this.op1);
if(currentText.length==0)
{
this.LoadingText = false;
}
if(currentText.length>1)
{
getLocationList({Id:event.target.value,ebs_id:this.registry_EBS_id,ptype:this.op1})
.then(result => {
var x=JSON.parse(result);
x.unshift({"Customer_Entered_Location_Name__c":"Not Found. Click To Enter Your Location Name","currentRecId":"1234567"});
this.searchRecords= x;
// this.LoadingText = false;
// console.log("locres",x);
this.txtclassname = this.searchRecords.length > 0 ? 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open' : 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click';
if(currentText.length > 0 && this.searchRecords.length == 0) {
this.messageFlag = true;
this.currenttext=currentText;
// this.callBlur(currenttext);
}
else {
this.messageFlag = false;
}
if(this.selectRecordId != null && this.selectRecordId.length > 0) {
this.iconFlag = false;
this.clearIconFlag = true;
}
else {
this.iconFlag = true;
this.clearIconFlag = false;
}
})
.catch(error => {
console.log('-------error-------------'+error);
console.log(error);
});
}
}
setSelectedRecord(event) {
var currentRecId = event.currentTarget.dataset.id;
var selectName = event.currentTarget.dataset.name=="Not Found. Click To Enter Your Location Name"?this.currenttext2:event.currentTarget.dataset.name;
this.txtclassname = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click';
this.iconFlag = false;
this.clearIconFlag = true;
this.selectRecordName = event.currentTarget.dataset.name=="Not Found. Click To Enter Your Location Name"?this.currenttext2:event.currentTarget.dataset.name;
this.selectRecordId = currentRecId;
this.inputReadOnly = true;
const selectedEvent = new CustomEvent('selected', { detail: {selectName, currentRecId}, });
// Dispatches the event.
//alert(selectName);
console.log("selected11",currentRecId);
if(selectName.length > 0)
{
this.callBlur(currentRecId,selectName);
}
this.dispatchEvent(selectedEvent);
}
resetData(event) {
this.selectRecordName = "";
this.selectRecordId = "";
this.inputReadOnly = false;
this.iconFlag = true;
this.clearIconFlag = false;
}
handleUploadFinished(event) {
// Get the list of uploaded files
// const uploadedFiles = event.detail.files;
// alert("upload finished"+this.rid);
uploadfile({Id:this.rid})
.then(result => {
//alert(result);
});
// alert("No. of files uploaded : " + uploadedFiles.length);
}
manual(event)
{
// alert(this.currenttext);
// alert(event.target.value);
if(this.currenttext==event.target.value)
{
this.callBlur(event.target.value);
}
}}
