Site logo

Archived topic

so that the search starts when another icon or enter is pressed

5 replies · Started by detanatar on August 10, 2022

Viewing posts 1–6 of 6

Hello
By default, the search works as in examples 1 and 2
you have to press enter to start the search.

It is necessary that it works like in paragraphs 1 and 3
so that the search starts when another icon or Enter is pressed

Hi Detanator,

To clarify, are you experiencing an issue with the Search Bar or are you wanting to add a different icon for it?

It is necessary that the search starts not only after pressing enter, but also starts after clicking on another search icon.

It is necessary to put one more icon in the standard search field (or next to it). Clicking on this icon should start the search.

ok google

Hi there,

it will require some custom development but the form inside the navigation search can be changed using the generate_navigation_search_output filter hook:

https://docs.generatepress.com/article/generate_navigation_search_output/

See here for an example this PHP Snippet will add a submit button inside the search form:

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" />
	    <label>
            	<input type="submit" class="search-submit" value="%4$s" />	
		<svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg>
	    </label>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
	esc_attr_x( 'Search', 'submit button' )
    ); 
} );

And some CSS to style it:

input.search-submit {
    display: none;
}

.main-navigation.is_stuck .inside-navigation {
    position: relative !important;
}

.navigation-search {
    display: flex;
    align-items: center;
    padding-right: 60px;
    background: #fff;
}

.navigation-search label {
    cursor: pointer;
}
This archived topic is closed to new replies.