Topic: entered search text overlaps grey placeholder.

sparkle
June 20, 2023 at 3:22 am
hi,

at some point, i found this code, which cleared the grey text that seems to ‘stick’ in the search box when the user enters a query.

View post on imgur.com

when the entered text is black but the last query or Search… stays beneath in grey, it’s very difficult to read. why doesn’t this code work anymore and do you have a better way to make the search bar more readable, accessible and less confusing?

thanks for all you do. 🙂
```
// GP Search Box Clear
add_filter( 'generate_navigation_search_output', 'tu_remove_search_query' );
function tu_remove_search_query() {
  printf( // WPCS: XSS ok, sanitization ok.
	'<form method="get" class="search-form navigation-search" action="%1$s">
	  <input type="search" class="search-field" value="" name="s" title="%2$s" />
	</form>',
	esc_url( home_url( '/' ) ),
	esc_attr_x( 'Search', 'label', 'generatepress' )
  );
}
```
David
June 20, 2023 at 3:43 am

Hi there,

can i see the site with this issue ?
sparkle
June 20, 2023 at 4:07 am

yes! i believe the code is currently not enabled. do you want it back in?
David
June 20, 2023 at 4:14 am

OK, so i see 3 x Forms being added for the search bar all sitting on top of each other, and what you’re seeing is the content from each form showing through.

Aside from that code – do you have any other form related functions added to the site ?

sparkle

June 20, 2023 at 4:27 am

yeah, a few things. we want the search to include all products and post types, then order them a certain way…..

 // gp - navigation search - add placeholder text
  add_filter( 'generate_navigation_search_output', function() {
	  printf(
		  '<form method="get" class="search-form navigation-search" action="%1$s">
			  <input type="search" placeholder="Search...." class="search-field" value="%2$s" name="s" title="%3$s" />
		  </form>',
		  esc_url( home_url( '/' ) ),
		  esc_attr( get_search_query() ),
		  esc_attr_x( 'Search', 'label', 'generatepress' ) 
	  ); 
  } );
  
  // gp - navigation search - clear previous search terms
	add_filter( 'generate_navigation_search_output', function() {
		printf( // WPCS: XSS ok, sanitization ok. 
			'<form method="get" class="search-form navigation-search" action="%1$s"> <input type="search" class="search-field" value="" name="s" title="%2$s" /> </form>',
			esc_url( home_url( '/' ) ), 
			esc_attr_x( 'Search', 'label', 'generatepress' ) );
	} );

  // gp - navigation search - also search products
  add_filter( 'generate_navigation_search_output', function() {
	  printf(  
		  '<form method="get" class="search-form navigation-search" action="%1$s">
			  <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
			  <!--<input type="hidden" name="post_type" value="product" />-->
		  </form>', 
		  esc_url( home_url( '/' ) ), 
		  esc_attr( get_search_query() ),   
		  esc_attr_x( 'Search', 'label', 'generatepress' ) 
	  ); 
  } );

function order_search_by_posttype($orderby){
    if (!is_admin() && is_search()) :
        global $wpdb;
        $orderby =
            "
            CASE WHEN {$wpdb->prefix}posts.post_type = 'post' THEN '1' 
                 WHEN {$wpdb->prefix}posts.post_type = 'product' THEN '2' 
            ELSE {$wpdb->prefix}posts.post_type END ASC, 
            {$wpdb->prefix}posts.post_title ASC";
    endif;
    return $orderby;
}
add_filter('posts_orderby', 'order_search_by_posttype');

do you want me to disable these?

sparkle
June 20, 2023 at 4:27 am

do you have better suggestions for how to get all possible answers to a search query?

David

June 20, 2023 at 5:39 am

Ok, so the 3 x generate_navigation_search_output filters explains the 3 forms 🙂
I think you need to replace all 3 with one combined function that:

1. adds a placeholder
2. removes the value so it doesn’t show the old search
3. includes the hidden input field for products to be included:

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search...." class="search-field" value="" name="s" title="%2$s" />
            <!--<input type="hidden" name="post_type" value="product" />-->
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

You can keep your last function for the posts_orderby as thats not related.

sparkle
June 20, 2023 at 5:44 am

i often say i know just enough php to be dangerous. thanks for helping me understand what i caused and sorting it out for me. where’s the merch table? ;-D

be well. thank you.
David
June 20, 2023 at 6:00 am

🙂

Glad to be of help.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

entered search text overlaps grey placeholder.