Space List Search Filter for Confluence 5

space-list-filter.html

<!--
## Search/Filter spaces on the Confluence Dashboard
## 
## Having to go to the Space Directory in Confluence to search for/filter spaces really bugs me.  
## This is a workaround for searching from the Dashboard
##
## Video: http://www.youtube.com/watch?v=WwbfTDd_xsY 
##
## Source: https://gist.github.com/dvdsmpsn/5801337
##
## Installation: Add this to Confluence Admin | Custom HTML | At the end of the BODY
-->

<style>
  input#space-list-filter {
    -moz-appearance: textfield;
    -moz-box-sizing: border-box;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAb0lEQVR42p2RMQ7AIAhFWXsG1h7Gtffo6urqyJGpwyetomnwJ38BH/wgfZSaS7PABbVOqkqm3Fzx6IQTatlDb5PJi21YBy1iuNgjJIgzFXqyCcXj1Z1DXNGTiw01aP252DCCgH7Fk41h8KaAGMDxADnaOPucd/m3AAAAAElFTkSuQmCC") no-repeat scroll 7px 6px #F5F5F5;
    border: medium none;
    border-radius: 5em 5em 5em 5em;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3) inset;
    color: #333333;
    font-family: inherit;
    font-size: inherit;
    height: 1.71429em;
    line-height: 1.71429;
    margin: 8px 0;
    padding: 2px 10px 2px 25px;
    vertical-align: baseline;
    width: 220px;
  }
</style>

<script id="template-search-spaces-section" type="text/template">
  <div class="space-list-section entity-list-section search-spaces-section ">
    <form id="space-list-filter-form">
      <input type="search" results="5" placeholder="Search spaces..." id="space-list-filter"/>
    </form>
  </div>
  <div id="search-spaces-section" class="space-list-section entity-list-section hidden">
    <h2 class="subheading">Space Search Results</h2>
    <ul id="search-spaces-results" class="space-list entity-list"></ul>
  </div>
</script>

<script id="template-search-space-list-item" type="text/template">
  <div>
    <li class="space-list-item entity-list-item">
      <div class="entity-attribute entity-logo entity-icon">
        <a href="{{spaceUrl}}">
          <img class="space logo" src="{{src}}" alt="Space Logo" />
        </a>
      </div>
      <div class="entity-attribute space-info entity-info">
        <a class="space-name" href="{{spaceUrl}}">{{space-name}}</a>
      </div>
    </li>
  </div>
</script>

<script type="text/javascript">

  AJS.toInit(function(){
	
    var searchSpaces = function () {     
      if (AJS.$('#space-list-filter').val().length == 0) {
        AJS.$('#search-spaces-section').addClass('hidden');
      }
      AJS.$('#search-spaces-results').empty();
      
      // TODO: Add a loading indicator
       
      AJS.$.ajax({
        url: '/rest/spacedirectory/1/search.json'
          + '?query='+ AJS.$('#space-list-filter').val() + '+OR+' + AJS.$('#space-list-filter').val() + '*'
          + '&type=global'
          + '&status=current'
          + '&pageSize=50'
          + '&startIndex=0'
          ,
        success: function(response){
            
          var resultTemplate = AJS.$('#template-search-space-list-item').html();
           
          if (response.spaces.length > 0) {
      
            AJS.$('#search-spaces-results').empty();
            AJS.$('#search-spaces-section').removeClass('hidden');
      
            for (var i=0; i<response.spaces.length; i++) {
              var space = response.spaces[i];
              var $result = AJS.$(resultTemplate);
              $result.find('a').attr('href', space.link[1].href);
              $result.find('a.space-name').html(space.name);
              $result.find('img').attr('src', space.logo.href);
              AJS.$('#search-spaces-results').append($result.html());
            }
          } else {
            AJS.$('#search-spaces-section').addClass('hidden');             
	  	  }
        },
        dataType: 'json'
      }); //.ajax
    }; // searchSpaces

    AJS.$('#spaces-pane').prepend(AJS.$('#template-search-spaces-section').html());	
    AJS.$('#space-list-filter').keyup(searchSpaces);
    
    AJS.$('#space-list-filter-form').submit(function(e) {
        e.preventDefault();
        window.location.href = AJS.$('#search-spaces-results a').eq(0).attr('href')
    });

  });//AJS.toInit()
</script>

Awesome script!
Thank you for share. :)