Add Clear Button on Search Forms

Hello, I want to add a clear button to search forms. When I click on the button the input value will be removed.

I added this one but it doesn’t work well:

function baran_add_clear_icon_on_search_forms() {
	?>
	<style>
		.clear-icon:before {
			content: "\f112";
			font-family: "woodmart-font";
			color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
		}

		.clear-icon {
			position: absolute;
			right: 30px;
			top: 50%;
			transform: translateY(-50%);
		}
	</style>
	<script type="text/javascript">
		jQuery('form.woodmart-ajax-search').append('<div class="clear-icon"></div>');
		let clearIcon = jQuery('.clear-icon');
		let formInput = jQuery('form.woodmart-ajax-search').find('input[type="text"]');
	
		clearIcon.on('click', function(e) {
			e.preventDefault();
			
			formInput.val('').attr('value','');
			if (formInput.val().length <= 0) {
				jQuery(this).hide();
			}
		});
	
		if (formInput.val().length > 0) {
			clearIcon.show();
		} else {
			clearIcon.hide();
		}
	
		formInput.on('change keydown paste input', function(e) {
			let length = e.target.value.length;
			if (length > 0) {
				clearIcon.show();
			} else {
				clearIcon.hide();
			}
		});
	</script>
	<?php
}
add_action( 'wp_footer', 'baran_add_clear_icon_on_search_forms' );

You can test it on mobile.

• This topic was modified 6 months, 2 weeks ago by baranozdemir.com. Reason: Added new info