0

i have a custom search bar created using LWC in wich i can write something, but i have 2 problems:

1: I can't figure how to make a clear button that reset what it is inside the input search bar if the user press the X button 2: I would like that the consolelog visualize every text change and not only when i press enter

here is my HTML:

<template>

    <div class="slds-form-element containerPadre">
        <label class="slds-form-element__label slds-text-heading_medium slds-text-color_inverse" for="text-input-id-74"> something </label>


        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left-right containerSearch">
            <!-- icona search -->

            <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>

            <input type="text" id="text-input-id-74" placeholder="search something" class="slds-input" onchange={searchValue}>

            <button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right" title="Clear" onclick={clearData} >
                <svg class="slds-button__icon slds-icon-text-light" aria-hidden="true" >
                    <use xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#clear" ></use>
                </svg>
                <span class="slds-assistive-text">Clear</span>
            </button>
        </div>

    </div>
</template>

My CSS:

.containerPadre {
    height: 10cm;
    width: 30cm;
    background-color: #001489;
    text-align: center;
}

.lgc-bg {
    text-align: center;
}
.labelText {
        text-align: center;
    padding-top: 0.5cm;
}

And my JavaScript:

import {LightningElement} from 'lwc';

export default class SearchBar extends LightningElement {


    function
    clearData() {
        document.getElementById("text-input-id-74").value = "";
    }

    searchValue(event) {
        {
            this.name= event.target.value;
            console.log(event.target.value);
        }
    };
}
0

2 Answers 2

0

You should try using LWC input component, instead of the standard <input> tag, and then you can bind a variable to its value, something like this:

<lightning-input type="text" label="Enter some text" onchange={handleInputChange} value={searchTerm}></lightning-input>

then in your js controller, create a new variable (the one you used on the input's value attribute) and the proper handlers:

export default class InputTextAdvanced extends LightningElement {

    searchTerm;

    handleInputChange(event) {
        // gets updated every time you type a new character.
        this.searchTerm = event.detail.value;            
        console.log(this.searchTerm)
    }
    clearData() {
        // this variable is bound to the input text, so setting it to null, will 
        // clear input text 
        this.searchTerm = null;
    }
}

So you don't need to look for any component's id in order to clear its value. hope this helps!

7
  • By using a LWC input component, can I show a table with all the results of the search while the user is typing? The table must be shown only when the user start typing
    – MashaMasha
    Commented Jul 6, 2022 at 12:48
  • yes, you can do that. on the handleInputChange you can call an apex controller to return a list of records based on what the user has typed on the input box. then you can render the results on a datatable.
    – McCubo
    Commented Jul 6, 2022 at 12:51
  • because i have found how to show search results after pressing enter or a button, but not while typing
    – MashaMasha
    Commented Jul 6, 2022 at 12:59
  • it should be the same, the only thing you are changing is the event (onchange instead of onclick) if your current logic works on click, should work on type as well. were you able to clear the input text?
    – McCubo
    Commented Jul 6, 2022 at 13:01
  • yes, the code you provided is excellent and it works, now i will try to show the results table while typing. thank you very much
    – MashaMasha
    Commented Jul 6, 2022 at 13:04
3

using document.getElementById("text-input-id-74"). is not a good practice in LWC.

Access Elements the Component Owns

additionally, using id's to identify dom elements in the markup is also not a good practice, because id's are dynamically changed upon rendering in lwc.

this might be the root cause of your issue.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .