将搜索过滤器面板设置为始终显示

Question

我正在编辑知识库的搜索功能。知识库具有一个筛选器面板，可以显示该面板，用户可以在其中选择要用于筛选搜索结果的数据库或类别。当前，将其设置为“隐藏”，直到单击链接/图标。如果可能，我希望使其始终可见。下面有用于搜索和过滤器部分的脚本文件，css文件和html。我希望显示/隐藏链接/图标仍能正常工作。我只希望默认为显示筛选器窗格。

//Link function
function(scope,element,attr){
	if(scope.data.set_foccus)
	setTimeout(function(){
		element.find('#kb_search_input').focus();
	},0);
	
	var c = scope.c;
	$rootScope = $injector.get("$rootScope");
	
	c.showFiltersButton = true;
	
	c.showAndHideFilters = function(){
		if(c.showFiltersButton==true){
			$(".hide-filters").addClass("show-filters").removeClass("hide-filters");
			$(".expand-width").addClass("original-width").removeClass("expand-width");
			c.showFiltersButton = false;
		}else{
			$(".show-filters").addClass("hide-filters").removeClass("show-filters");
			$(".original-width").addClass("expand-width").removeClass("original-width");
			c.showFiltersButton = true;
		}
	}
	
	c.hideFilters = function(){
	  $(".show-filters").addClass("hide-filters").removeClass("show-filters");
		$(".original-width").addClass("expand-width").removeClass("original-width");
		c.showFiltersButton = true;
	}
	
	c.toggleFacets = function(){
		$rootScope.showFacet = !$rootScope.showFacet;
		$rootScope.showLanguageFacet = false;
	}
	
	c.showLanguageFacet = function(){
		$rootScope.showFacet = !$rootScope.showFacet;
		$rootScope.showLanguageFacet = true;
	}
	
	c.keywordChanged = function(event){
		c.keyword = c.keyword.trim();

		if(c.keyword != c.oldKeyword){
			//handle keyboard events for enter and keyup
			if(event){
				var keycode = (event.keyCode ? event.keyCode : event.which);
				if(!c.data.allow_instant_search && keycode != 13)
					return;
			}

			//throw update event based on options			
			if( (c.data.allow_empty_search && c.keyword == "") || (c.keyword && c.keyword.length >= c.data.min_search_char)){
				$rootScope.$emit('sp.kb.updated.keyword',{'keyword':c.keyword});
				c.hideFilters();
			}

			c.oldKeyword = angular.copy(c.keyword);
		}

		scope.$evalAsync(function(){
			if($("#kb_search_input"))
				$("#kb_search_input").focus();
		});
	};

	//If instant search enable then wait for 200ms for the next input then throw event
	$("#kb_search_input").keyup(_.debounce(function(event){
		c.keywordChanged(event);
	},c.options.search_wait));

	$(window).resize(function() {
		var width1 = $(window).width();
		if(width1<=992 && !$rootScope.isMobile){
			$rootScope.isMobile = true;
		}else if(width1>992 && $rootScope.isMobile ){
			$rootScope.showFacet = false;
			$rootScope.isMobile = false;
		}
	});
	
	//set keyword onload from url and throw event
	if(c.data.keyword){
		c.keyword = c.data.keyword;
		c.keywordChanged();
	}
}

@media only screen and (max-width: 991px) {
    .kb-search-block {
      padding-top : 7px !important;
    }
    .filter-icon-padding {
      padding-left : 0px !important;
      padding-right : 0px !important;
      text-align : center;
    }
    .kb-search-display-none {
      display :none !important;
    }
    .kb-search-block .lang-icon {
      font-size : 18px;
      float :left;
      padding-right:9px;
    }
  }
   @media only screen and (min-width:991px) {
 		.expand-width {
    	width :100%;
    }
   	.hide-filters {
    	display :none;
    }
    .original-width{
    	width : 75%;
    }
    .show-filters {
    	display:block;
    }
 }

<div class="kb-search-block" ng-class="$root.showFacet? 'kb-search-display-none':''" ng-cloak>
  <div class="search-bar col-md-5 col-xs-11 col-sm-7 no-pad">

    <div ng-if="c.showLanguageIcon" class="visible-xs visible-sm lang-icon">
      <span ng-click ="::c.showLanguageFacet()"><i class="fa fa-globe icon-padding" aria-hidden="true"></i></span>
    </div>
    <div class="pad-bottom">
      <div class="input-group input-group-{{::c.options.size}}">
        <input id="kb_search_input" name="q" type="text" ng-model="c.keyword" aria-label="{{::options.title}}"  placeholder="{{::options.title}}" class="form-control">
        <span class="input-group-btn">
          <button name="search" type="submit" aria-label="search" class="btn btn-{{::c.options.color}}" ng-click="c.keywordChanged('')">
            <i ng-if="::c.options.glyph" class="fa fa-{{::c.options.glyph}}"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
  <div class="filter-icon-padding visible-xs visible-sm col-xs-1 col-sm-1">
    <span class=" filter-icon" ng-click ="::c.toggleFacets()" ng-class="c.applycolor ? 'selected-filter-color' : 'filter-color'" ><i class="fa fa-filter filter-size" aria-hidden="true"></i>
      <span class="check-position" ng-show="c.applycolor"><i class="fa fa-check float-left"  aria-hidden="true"></i></span></span>
  </div>
  
  <!--
 <div class="visible-xs visible-sm col-xs-1 col-sm-1 no-pad">
    <div class="col-xs-11 col-sm-11 pad-bottom no-pad">
-->
  <div class="col-md-12">
  <div class="hidden-xs hidden-sm filter-class">
   <a href="javascript:void(0);" id="showFilterBtn"  ng-click="c.showAndHideFilters()"><i class="fa fa-list" aria-hidden="true"></i>
    <span ng-show="c.showFiltersButton" class="filter-text">${Show filters}</span>
    <span ng-show="!c.showFiltersButton" class="filter-text">${Hide filters}</span></a>
  </div>
  </div>
  
</div>

//client script
function($rootScope,$window,$timeout,KnowledgeSearchService,$scope) {
	var c = this;


	
	c.keyword = c.data.keyword || "";
	c.oldKeyword = c.data.keyword || "";
	c.options.glyph = c.options.glyph || 'search';
	c.filterCount =0;
	c.applycolor =false;
	c.items =[];
	c.showLanguageIcon = false;
	if($rootScope.showLanguageIcon){
		c.showLanguageIcon = $rootScope.showLanguageIcon;
	}
	var qry;

	//Subscribe search element to service on load
	if(KnowledgeSearchService){
		var input = {};
		input.element = "search";
		input.alt_url_params = c.options.alt_search_url_params;
		KnowledgeSearchService.subscribe(input);
	}
	var refreshSearchFilter = $rootScope.$on('sp.kb.refresh.filter',function (event,data){
		if(data){
			c.items = data;
		}
		if(c.items.length>0){
			c.filterCount = c.items.length;
			c.applycolor = true;
		}else{
			c.filterCount = 0;
			c.applycolor = false;
		}
	});


	var refreshKeyword = $rootScope.$on('sp.kb.refresh.keyword',function(event,data){
		if(data)
			c.keyword = data.keyword;				 
	});
	
	$scope.$on('$destroy',function(){
		refreshSearchFilter();
		refreshKeyword();
	});

//Server script
(function($sp) {

	options.alt_search_url_params = options.alt_search_url_params || "";

	//Set keyword from url
	data.keyword = "";
	var keywordParm = $sp.getParameter('query') || "";

	if(keywordParm == ""){
		if(options.alt_search_url_params){
			var qParams =  options.alt_search_url_params.toString().split(",");
			qParams.forEach(function(key){
				if($sp.getParameter(key))
					keywordParm = $sp.getParameter(key);
			});
		}
	}
	
	if(keywordParm)
		data.keyword = keywordParm;

	//set values based on options and properties.
	//options will be given precedence if value exit
	data.set_foccus = gs.getProperty('glide.knowman.portal_search_focus') == 'true' || false;
	data.min_search_char = parseInt(options.min_search_char || gs.getProperty('glide.knowman.search_character_limit') || 3);
	data.allow_instant_search = options.allow_instant_search ? (options.allow_instant_search == 'Use system property' ?  gs.getProperty('glide.knowman.search.instant_results') == 'true' : options.allow_instant_search == 'Yes') : gs.getProperty('glide.knowman.search.instant_results') == 'true' || false;
	data.allow_empty_search = options.allow_empty_search ? (options.allow_empty_search == 'Use system property' ?  gs.getProperty('glide.knowman.allow_empty_search') == 'true' : options.allow_empty_search == 'Yes') : gs.getProperty('glide.knowman.allow_empty_search') == 'true' || false;
	
	options.search_wait = options.search_wait || 500;
	options.title = options.title || gs.getMessage('Search (minimum {0} characters)',data.min_search_char+'');

	var langOption = {};
	langOption.alt_lang_url_params = options.alt_lang_url_params || "";
	data.language_picker = $sp.getWidget("kb-language-picker",langOption);
})($sp);

Answer 1

将其添加到链接函数中，就在c.showFiltersButton = true;和c.showAndHideFilters：

之间

$(".hide-filters").addClass("show-filters").removeClass("hide-filters");
$(".expand-width").addClass("original-width").removeClass("expand-width");