Apex Code Development You need to sign in to do that
Don't have an account?
ForceRookie How to show dropdown in slds combobox and put selected item to input textbox?
I converted my lightning:combobox into slds combobox to use data attributes, now, dropdown is not showing. Please help me.
And also, how to put the selected item into input textbox?
<aura:attribute name="myObject" type="List"/>
<aura:attribute name="myCustomSettings" type="MyCustomSettings__c[]"/>
<aura:iteration items="{!v.myCustomSettings}" var="obj" indexVar="index">
<tr class="slds-hint-parent">
<td role="gridcell" data-label="Object">
<div class="slds-form-element slds-form-element__control">
<div class="slds-combobox_container">
<div aura:id="open" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="cellField slds-input slds-combobox__input" role="textbox" autocomplete="off" readonly="true"
aura:id="allObjects"
placeholder="-Select-"
data-id="{!'index-' + index + 1}"
data-value="{!index + 1}"
value="{!obj.Object__c}"
onfocus="{!focus}"/>
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<lightning:icon class="slds-icon slds-icon-text-default slds-icon_xx-small" iconName="utility:down" size="xx-small" variant="brand" />
</span>
</div>
<div aura:id="options" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<aura:iteration items="{!v.myObject}" var="myLst" indexVar="i">
<li aura:id="selectObj" role="presentation" class="slds-listbox__item" onclick="{!c.itemSelected}" data-id="{!'index-' + i + 1}" data-value="{!i + 1}">
<div id="{!i + 1 + '-item'}" aura:id="is-selected" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="{!myLst.label}">{!myLst.label}</span>
</span>
</div>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</div>
</td>
<tr>
<aura:iteration/>
focus : function (component, event, helper) {
var open = component.find("open");
$A.util.toggleClass(open, 'slds-is-open');
},
itemSelected : function(component, event, helper) {
var selectedItem = event.currentTarget;
var id = selectedItem.dataset.id;
var elements = component.find('selectObj');
for (var i = 0; i < elements.length; i++) {
var val = elements[i].getElement().getAttribute('data-id');
if(val == id) {
console.log(val);
//put the selected item to input textbox
}
}
},
Please refer the below link for lightning combobox picklist feature examples,
https://developer.salesforce.com/docs/component-library/bundle/lightning:combobox/documentation
Thanks,
SEKAR RAJ
You can use this,
<aura:component >
<aura:attribute name="myObject" type="List" />
<aura:attribute name="myCustomSettings" type="MyCustomSettings__c[]" />
<aura:iteration items="{!v.myCustomSettings}" var="obj" indexVar="index">
<tr class="slds-hint-parent">
<td role="gridcell" data-label="Object">
<div class="slds-form-element slds-form-element__control">
<div class="slds-combobox_container">
<div aura:id="open" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="cellField slds-input slds-combobox__input" role="textbox" autocomplete="off" readonly="true"
aura:id="allObjects"
placeholder="-Select-"
data-id="{!'index-' + index + 1}"
data-value="{!index + 1}"
value="{!obj.Object__c}"
onfocus="{!c.focus}"/>
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<lightning:icon class="slds-icon slds-icon-text-default slds-icon_xx-small" iconName="utility:down" size="xx-small" variant="brand" />
</span>
</div>
<div aura:id="options" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<aura:iteration items="{!v.myObject}" var="myLst" indexVar="i">
<li role="presentation" class="slds-listbox__item" onclick="{!c.itemSelected}" data-id="{!'index-' + i + 1}" data-value="{!i + 1}" data-lbl="{!myLst.label}" data-indexid="{!index}">
<div id="{!i + 1 + '-item'}" aura:id="is-selected" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="{!myLst.label}">{!myLst.label}</span>
</span>
</div>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
</aura:iteration>
</aura:component>
({
doInit : function(component, event, helper) {
console.log("--init called---");
},
focus : function (component, event, helper) {
var parentClass = event.currentTarget.parentElement.parentElement;
$A.util.toggleClass(parentClass, 'slds-is-open');
},
itemSelected : function(component, event, helper) {
var selectedItem = event.currentTarget;
var selectedItemIndex = selectedItem.dataset.indexid;
var selectedItemlbl = selectedItem.dataset.lbl;
var cmp = component.find("allObjects");
var openCmps = component.find("open");
if(cmp!= null && cmp.length > 0){
var eleme = cmp[selectedItemIndex].getElement();
eleme.value = selectedItemlbl;
var elemOpenCMps = openCmps[selectedItemIndex].getElement();
elemOpenCMps.classList.remove('slds-is-open');
console.log(elemOpenCMps);
}else if(cmp!= null){
var eleme = cmp.getElement();
eleme.value = selectedItemlbl;
var elemOpenCMps = openCmps[selectedItemIndex].getElement();
elemOpenCMps.classList.remove('slds-is-open');
}
},
})
It will work for you,
Thanks,
if its helpful thn please mark as best answer.