I have created a search form using search API. After clicking on search button search results shows because of search API. Using drupal behaviors I have added a click event on search button, that when it is clicked the sub-menu's display:none; and clear search button - display:block;
The click event is not working on search button. It always shows results on every click but does not change the display property.
Can any one help me in this?
(function (Drupal, $) {
Drupal.behaviors.icecreamBehaviors = {
attach: function attach(context) {
$(document, context).once('icecreamBehaviors').each(function () {
// e.stopPropagation();
var searchBtn = $('#edit-submit-search-view');
var inputFrm = $('#edit-search-api-fulltext')
var leftSubMenu = $('#block-leftsubmenu');
var subMenuList = $('#sub_Menu');
var followUs = $('#block-followus-2');
var clearSrch = $('#clear-search');
var view_content = $('.view-content');
searchBtn.prop("disabled", true);
$('#clear-search').hide();
inputFrm.on("change", function () {
if ($('#edit-search-api-fulltext').val().length >= 2) {
searchBtn.prop("disabled", false);
} else {
searchBtn.prop("disabled", true);
}
});
searchBtn.on('click', function () {
leftSubMenu.css("display", "none");
subMenuList.css("display", "none");
followUs.css("display", "none");
$('#clear-search').show();
});
$(document).on('click', '#clear-search', function () {
leftSubMenu.css("display", "block");
subMenuList.css("display", "block");
followUs.css("display", "block");
$('.search-content > .view-content').hide();
$('#clear-search').hide();
$("input[name^='search_api_fulltext']").val('');
$('.search-content > .view-header').hide();
console.log("Clear Search Works!");
});
});
}
};
})(Drupal, jQuery);