I tried to create a search input, but when I deploy this code and insert text in the input it shows the next error:
[Cannot read properties of undefined (reading 'toUpperCase')]
this is my method in the JSController:
searchTradelineController: function (component, event, helper) {
let input, filter, ul, li, a, i, txtValue;
input = document.getElementById("picklist-group-label");
filter = input.value.toUpperCase();
ul = document.getElementById("ULid");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("ui:outputURL")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
and this is my html or cmp:
<!--Search -->
<lightning:input type="text" placeholder="Search…" onkeypress="{!c.searchTradelineController}"/>
<!--List -->
<div class="slds-form-element__control">
<div class="slds-dueling-list">
<div class="slds-dueling-list__column slds-dueling-list__column_responsive">
<div class="slds-dueling-list__options">
<aura:renderIf isTrue="{!v.truthy}">
<ul id="ULid" aria-describedby="option-drag-label" aria-labelledby="label-39" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox">
<aura:iteration items="{!v.ListTA}" var="item" indexVar="i" >
<li role="presentation" class="slds-listbox__item">
<div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0">
<ui:outputURL label="{!item.TA_Tradeline_Name_col__c}" click="{!c.onTradelineClick}" value="javascript:void(0)" title="{!item.TA_id__c}"/>
</div>
</li>
</aura:iteration>
</ul>
</aura:renderIf>
</div>
</div>
</div>
</div>
thanks you!