<input type="text"
       ng-disabled='instanceId == 0'
       ng-model="searchText"
       placeholder="{{'Search site' | translate}}"
       typeahead-on-select="selectSite($item, $model, $label);"
       typeahead="site as site.name for site in search($viewValue)"
       typeahead-loading="searching"
       typeahead-template-url="typeahead-template.html"
       class="form-control"
       typeahead-min-length="2"
       ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }">

<i ng-show="searching" class="glyphicon glyphicon-refresh"></i>

<ul class="list-group">
    <li class="list-group-item" ng-repeat="site in sites">                
        <span>{{site.name}}</span>
        <button type="button" class="close" ng-click="deselectSite(site)"><span aria-hidden="true">&times;</span></button>
    </li>
</ul>

<script type="text/ng-template" id="typeahead-template.html">    
    <a>
        <span bind-html-unsafe="match.label"></span>
    </a>
</script>