1

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!

3
0

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
        )

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.