如何创建重定向到搜索结果页面的提交搜索按钮？

Question

我的 wordpress 网站中有一个插件全屏搜索覆盖，但是此搜索表单仅在用户按 Enter 时才有效我还希望用户单击搜索按钮并在输入搜索词时重定向到搜索结果页面.你能帮我解决这个问题吗？？

这是全屏search.php代码：

函数 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           
                                   

这是插件的js文件：

// 当文档准备好时... jQuery( 文档 ).ready( 函数( $ ) {

// ... 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' );
} );

});

Answer 1

尝试将按钮type属性更改为submit。

因为

<button type="button" class="close" id="full-screen-search-close">X</button>

被视为通用按钮。