0

I have one datalist where I am getting all account Names and displaying like a dropdown. I want to add --ALL-- as a default option Like currently my compo is like enter image description here

but I want to add --ALL-- As a default option like below

enter image description here

 <label class="slds-form-element__label" style="margin-right: 0.5rem;">Select Account</label>
 <input data-id="inputData" onchange={} required value={accuntName} name="input" list="filterList" placeholder="search Account" class="slds-input" type="text" autocomplete="off" />
    <datalist data-id="AccountList" id="AccountList" class="">
        <template for:each={accountDeails} for:item='item'>
            <option key={item} value={item}>{item}</option>
        </template>
    </datalist>
            

JS

accountDeails()
    .then(result=>{
     if(result){

        this.accountDeails = result;
    }
let listAcc= this.template.querySelector('datalist[data-id="AccountList"]').id;
this.template.querySelector('input[data-id="inputData"]').setAttribute("list", listAcc);

Apex

@auraEnabled
public static list<string> accountDeails() {
list<account>accList =[select id from account];
list<string> acName = new list<string>();
for(account ac:accList) {
acName.add(ac.Name);
}
return acName;
2

The idea is that this value should be added to the datalist options and as selected value for the input.

You can do it in Apex

@AuraEnabled
public static List<String> accountDeails() {
    List<Account> accList =[select Id from Account];
    List<String> acName = new List<String>{'--ALL--'};
    for(Account ac : accList) {
        acName.add(ac.Name);
    }
return acName;

in JS set accuntName to --ALL--

....
accountDeails()
    .then(result=>{
        if(result){
            this.accountDeails = result;
            this.accuntName = '--ALL--';
        }
....
1

You can simply add it in your template, if you want to:

<datalist data-id="AccountList" id="AccountList" class="">
  <option value="">-- ALL --</option>
  <option for:each={accountDeails} for:item='item' key={item} value={item}>{item}</option>
</datalist>

Note that using a template isn't required for for:each if you don't want to use it (but it's fine if you do).

1
  • thanks for that..but how it will be default .like when i am refreshing the page it should show ALL option as default..but currently when i choose drop down then only i can see ALL option
    – Sandy
    Nov 19 '21 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.