-<section class="form-group">
+<div id="search">
+
+ <!-- Search bar -->
<label class="sr-only" for="livesearch">Search</label>
- <input
- mou-live-search
- (results)="orgunits = $event"
- (loading)="loading = $event"
- type="text"
- autofocus
- id="livesearch">
- <img style="width: 20px; position: absolute;"
- [hidden]="!loading"
- src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
-</section>
-<section>
- <ul>
- <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)" style="padding: 0.5em 0.5em 0.5em 0;">
- {{orgunit.name}}
- </li>
- </ul>
-</section>
+
+ <form id="searchform">
+ <div class="row">
+ <input
+ mou-live-search
+ (results)="orgunits = $event"
+ (loading)="loading = $event"
+ type="text"
+ autofocus
+ class="livesearch col-md-10"
+ name="livesearch"
+ id="livesearch"
+ placeholder="Search"
+ onblur="this.placeholder = 'Search'"
+ onfocus="this.placeholder = ''"
+ value=""/>
+
+ <!--Show and empty filtermenu-->
+ <button type="button" class="filterbutton col-md-2" (click)="toggle()"
+ data-toggle="collapse" data-target="#dropdown-menu">
+ {{ visible ? '▽' : 'х' }}
+ </button>
+ </div>
+ </form>
+
+ <!-- Searchresult div -->
+ <div class="row">
+ <span [hidden]="hideDiv()">
+ <div class="divresult col-md-10" id="divresult" [hidden]="checkOrgunits()">
+ <ul class="dropdown-menu result">
+ <li>
+ <!--exit results-->
+ <button type="button" class="btn btn-default emptyresult" (click)="emptyByClick()">
+ <span class="glyphicon glyphicon-remove"></span></button>
+ </li>
+ <li *ng-for="#orgunit of filteredOrgunits" id="orglist" (click)="getMoreInfo(orgunit)">
+ <a id="left-menu" href="#"><span class="glyphicon glyphicon-map-marker glyresult"></span> {{orgunit.name}}</a>
+ </li>
+ <li *ng-if="filteredOrgunits.length == 0">
+ <p class="nomatch"><span class="glyphicon glyphicon-info-sign glyinfo"></span> No matching results </p>
+ </li>
+ </ul>
+ </div>
+ </span>
+
+ <!-- Filter selectors to be filled inn by getUnitGroupSets() -->
+ <div id="dropdowndiv" class="btn-group collapse col-md-2">
+ <ul id="dropdown-menu" role="menu" class="dropdown-menu filtermenu">
+ <li>Facility</li>
+ <li class="dropdown-header">Ownership</li>
+ <li>
+ <select class="form-control filteroption" id="ownershipSelector" (click)="setFilter()"></select>
+ </li>
+ <li class="dropdown-header">Type</li>
+ <li>
+ <select class="form-control filteroption" id="typeSelector" (click)="setFilter()"></select>
+ </li>
+ <li class="divider"></li>
+ <li>Location</li>
+ <li class="dropdown-header">Rural/Urban</li>
+ <li>
+ <select class="form-control filteroption" id="locationSelector" (click)="setFilter()"></select>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+