Mettere la "X" nel campo di ricerca che cancella il testo

[albenessereblog]

Vedo nei siti campi di ricerca con la X laterale che cancella il testo, mi sarebbe utile, il mio codice è questo, come lo modifico?

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">    <label>
        <span class="screen-reader-text"><?php echo esc_html_x( 'Search for:', 'label', 'donovan' ); ?></span>
        <input type="search" class="search-field"
            placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'donovan' ); ?>"
            value="<?php echo get_search_query(); ?>" name="s"
            title="<?php echo esc_attr_x( 'Search for:', 'label', 'donovan' ); ?>" />
    </label>
    <button type="submit" class="search-submit">
        <?php echo donovan_get_svg( 'search' ); ?>
        <span class="screen-reader-text"><?php echo esc_html_x( 'Search', 'submit button', 'donovan' ); ?></span>
    </button>
</form>

[laravista]

Ho provato con Google/Gemini:

un utente chiede: Vedo nei siti campi di ricerca con la X laterale che cancella il testo, mi sarebbe utile, il mio codice è questo, come lo modifico?

Risposta:

Per aggiungere la "X" che cancella il testo, modifica il tuo codice HTML cambiando il tipo di input da type="text" a type="search", e usa JavaScript per resettare eventuali filtri quando il campo viene svuotato. I browser moderni (come Chrome e Safari) mostreranno automaticamente l'icona.

Esempio:

<input type="search" id="mioCampo" placeholder="Cerca...">

const input = document.getElementById('mioCampo');

input.addEventListener('input', function() {
    if (input.value === '') {
        // Inserisci qui la funzione che mostra tutti i risultati o resetta la ricerca
        console.log("Campo svuotato, resetta la ricerca!");
    }
});