I have a plugin full screen search overlay in my wordpress website but this search form is only working when the user hit enter I want also the user to click a search button and get redirected to search results page when he enters a search term.can you please help me with this query ??
this is the full screen search.php code:
function output_full_screen_search() {
?>
<div id="full-screen-search">
<button type="button" class="close" id="full-screen-search-close">X</button>
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>" id="full-screen-search-form">
<div id="full-screen-search-container">
<input type="text" name="s" placeholder="<?php _e( 'Search' ); ?>" id="full-screen-search-input" />
</div>
</form>
</div>
<?php
this is the js file of the plugin :
// When the document is ready...
jQuery( document ).ready( function( $ ) {
// ... display the Full Screen search when:
// 1. The user focuses on a search field, or
// 2. The user clicks the Search button
$( 'form[role=search] input, form[role=search] button' ).on( 'focus, click', function( event ) {
// Prevent the default action
event.preventDefault();
// Display the Full Screen Search
$( '#full-screen-search' ).addClass( 'open' );
// Focus on the Full Screen Search Input Field
$( '#full-screen-search input' ).focus();
} );
// Hide the Full Screen search when the user clicks the close button
$( '#full-screen-search button.close' ).on( 'click', function( event ) {
// Prevent the default event
event.preventDefault();
// Hide the Full Screen Search
$( '#full-screen-search' ).removeClass( 'open' );
} );
} );
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…