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

Question

我正在为知识库编辑搜索功能。知识库有一个过滤面板，用户可以在其中 select 显示他们想使用哪个数据库或类别来过滤搜索结果。当前它设置为 "hidden" 直到为它单击 link/icon。如果可能的话，我想让它始终可见。下面我有脚本文件，css 文件，以及搜索和过滤部分的 html。我希望 show/hide link/icon 仍然有效。我只想默认显示筛选器窗格。

//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

将此添加到您的 Link 函数中，就在 c.showFiltersButton = true; 和 c.showAndHideFilters[=15 之间=]:

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

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

Set Search Filter Panel to Always Display

html

javascript

search

filter

show