title: Set Search Filter Panel to Always Display
body: <p>I am working on editing search functionality for a knowledge base. The knowledge base has a filter panel that can be displayed where users can select which database or category they want to use to filter search results. Currently it is set to "hidden" until the link/icon is clicked on for it. I would like to make it always visible if possible. Below I have the script file, css file, and html for the search and filter section. I would like for the show/hide link/icon to still work. I just want the default to be that the filter pane is shown.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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 &amp;&amp; keycode != 13)
       return;
     }
  
     //throw update event based on options   
     if( (c.data.allow_empty_search &amp;&amp; c.keyword == "") || (c.keyword &amp;&amp; c.keyword.length &gt;= 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&lt;=992 &amp;&amp; !$rootScope.isMobile){
     $rootScope.isMobile = true;
    }else if(width1&gt;992 &amp;&amp; $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();
   }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
      }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="kb-search-block" ng-class="$root.showFacet? 'kb-search-display-none':''" ng-cloak&gt;
    &lt;div class="search-bar col-md-5 col-xs-11 col-sm-7 no-pad"&gt;
  
      &lt;div ng-if="c.showLanguageIcon" class="visible-xs visible-sm lang-icon"&gt;
        &lt;span ng-click ="::c.showLanguageFacet()"&gt;&lt;i class="fa fa-globe icon-padding" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="pad-bottom"&gt;
        &lt;div class="input-group input-group-{{::c.options.size}}"&gt;
          &lt;input id="kb_search_input" name="q" type="text" ng-model="c.keyword" aria-label="{{::options.title}}"  placeholder="{{::options.title}}" class="form-control"&gt;
          &lt;span class="input-group-btn"&gt;
            &lt;button name="search" type="submit" aria-label="search" class="btn btn-{{::c.options.color}}" ng-click="c.keywordChanged('')"&gt;
              &lt;i ng-if="::c.options.glyph" class="fa fa-{{::c.options.glyph}}"&gt;&lt;/i&gt;
            &lt;/button&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="filter-icon-padding visible-xs visible-sm col-xs-1 col-sm-1"&gt;
      &lt;span class=" filter-icon" ng-click ="::c.toggleFacets()" ng-class="c.applycolor ? 'selected-filter-color' : 'filter-color'" &gt;&lt;i class="fa fa-filter filter-size" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;span class="check-position" ng-show="c.applycolor"&gt;&lt;i class="fa fa-check float-left"  aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;/div&gt;
    
    &lt;!--
   &lt;div class="visible-xs visible-sm col-xs-1 col-sm-1 no-pad"&gt;
      &lt;div class="col-xs-11 col-sm-11 pad-bottom no-pad"&gt;
  --&gt;
    &lt;div class="col-md-12"&gt;
    &lt;div class="hidden-xs hidden-sm filter-class"&gt;
     &lt;a href="javascript:void(0);" id="showFilterBtn"  ng-click="c.showAndHideFilters()"&gt;&lt;i class="fa fa-list" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;span ng-show="c.showFiltersButton" class="filter-text"&gt;${Show filters}&lt;/span&gt;
      &lt;span ng-show="!c.showFiltersButton" class="filter-text"&gt;${Hide filters}&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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&gt;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();
   });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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);</code></pre>
  </div>
  </div>
  </p>