how can I fix the following UpperCase error

Question

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!

Answer 1

You need to make sure that input.value is not undefined.

from your code, there is no indication that picklist-group-label exists. hence the input.value returning undefined.

same goes for your txtValue variable.

couple of comments:

• why aura? and not lwc.

as per your "approach" to search, I would strongly advise against using the hide and display approach for elements that do not include a substring of your query. (assuming you grabbed that code from How TO - Filter/Search List)Instead, check for property values in an array of JSON objects which contain your object properties, and create a "duplicate" array which only contains objects whose properties contain or match certain criteria. for this you can use the filter method.

ex:

this.matchingResults= this.allResults.filter(
            item => item .label.toUpperCase().indexOf(query) > -1 || item.otherProperty.toUpperCase().indexOf(query) > -1
        )