Custom Facet Navigation

Developers Search Interface
1

I am trying to make a facet navigation as a dropdown select, instead of the other options. I have it pulling in the facet items and displaying them in a dropdown. However, I can’t get it to change the results based on the selection of the dropdown. Can anyone help me out with this possibly? I’d also like the dropdowns to be in alphabetical order. Below is my code so far.

<#if response.facets?? && response.facets?size gt 0>

          <div class="dropdown" id="search-facets" >
            <#list response.facets as facet>   
                    <div class="aria-controls='facet-${facet?counter}'">
                        <h4>${facet.name}</h4>
                        <#if facet.name == 'Pillars'>
                        <div id="facet-${facet?counter}">     
                            <select class="select-pillar" id="selectPillar facet-${facet?counter}"> 
                                <#list facet.allValues as value>
                                    <option value="${value.queryStringParam}" class="${value.label?lower_case}">
                                            ${value.label}
                                    </option>
                                </#list>
                            </select>
                           
                        </div>
                        <#elseif facet.name == 'County'>
                        <div id="facet-${facet?counter}">
                            <select class="select-county" id="selectCounty facet-${facet?counter}"> 
                                <#list facet.allValues as value>
                                    <option value="${value.label}" class="${value.label?lower_case}">
                                        ${value.label}
                                    </option>
                                </#list>
                            </select>
                        </div>
                        </#if>
                    </div>
                
            </#list>
          </div>
        </div>
      </#if>
2

If you are using 15.10 or earlier faceted navigation is notoriously difficult to customise.

In this version I would strongly recommend using the faceted navigation code from the GitHub project
(GitHub - funnelback/faceted-navigation: Replacement macros for faceted navigation display. Adds support for checkbox facets and faceted navigation category sort and rename.) as your starting point as this allows you to do much more customisation of the facet templates, and also includes code for sorting and renaming categories (note there are some limitations though).

In 15.12 customisation of the faceted navigation should be much more straightforward.