Search Dropdown Close on Click Anywhere

[SeLoRe]

Hi,

I tried that below java code but it closes to search box when I click on search box for typing. Do you have another js code for fix that.

Content or search drop-down close on click

[nabeel]

Hi there,

Thanks for writing in! Can you please share the URL of the page so we can take a look and suggest you the solution accordingly?

Thanks!

[SeLoRe]

My demo website informations are inside of secure not.

[thai]

Hi There,

I’ve updated the code to this:

jQuery(function($){
  $('form.x-search').on('click touchend', function(e) {
    e.stopPropagation();
	});
	$(document).on('click touchend', function(event){
		if($('.x-dropdown.x-active').length > 0){
			$('.x-dropdown.x-active, .x-anchor-toggle.x-active').trigger('click');
		}
	});
});

Everything is working fine now.

Cheers!

[SeLoRe]

I detected one more issue, now when I click on cross it is not removing text in search box.

[rad]

Hi there,

Please try removing this line from that code

e.stopPropagation();

That disables the click propagation.

Thanks!

[SeLoRe]

If I remove that code I have first issue so it closes to search box when I click on search box for typing.

[Alaa]

Hi SeLoRe,
There is a workaround to get it working but when the “x” icon is clicked it will “clear and close” the search box, if that is fine then you can use this snippet:

jQuery(function($){
	$(document).on('click touchend', function(event){
		if(!$(event.target).is('.x-search-input') && $('.x-dropdown.x-active').length > 0){
			$('.x-dropdown.x-active, .x-anchor-toggle.x-active').trigger('click');
		}		
	});
});

Thanks.

[SeLoRe]

if there is no other way I can use it for now but I want use “x” icon for just clean content of search box not for clean and close if possible please.

[christopher]

Hi there,

You can use the Javascript code below. Add the code at the end of all the suggested codes:

jQuery('.x-search').on('click', '.x-search-btn-clear', function(e) {
e.stopPropagation();
jQuery(this).closest('.x-search').find('.x-search-input').val('');
});

That will only clear the content of the search box. Thank you.

[SeLoRe]

Yess finally you guys perfect, thank you all.

[ruenel]

You are most welcome!