Displaying 'no results' message

src/bootstrap/choices.tpl.html

@@ -1,7 +1,9 @@
 <ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
-    role="listbox"
-    ng-show="$select.items.length > 0">
-  <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
+    role="listbox" ng-show="$select.items.length > 0 || $select.noResults">
+  <li ng-if="$select.noResults && $select.items.length == 0" class="ui-select-choices-row">
+    <span>{{ $select.noResults }}</span>
+  </li>
+  <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" ng-show="$select.items.length > 0">
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name"></div>
     <div id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"

src/common.css

@@ -212,7 +212,8 @@ body > .ui-select-bootstrap.open {
   border-right: 1px solid #428bca;
 }
 
-.ui-select-bootstrap .ui-select-choices-row>a {
+.ui-select-bootstrap .ui-select-choices-row > a,
+.ui-select-bootstrap .ui-select-choices-row > span {
     display: block;
     padding: 3px 20px;
     clear: both;

src/common.js

@@ -97,7 +97,8 @@ var uis = angular.module('ui.select', [])
   generateId: function() {
     return latestId++;
   },
-  appendToBody: false
+  appendToBody: false,
+  noResults: ''
 })
 
 // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913

src/uiSelectController.js

@@ -16,6 +16,7 @@ uis.controller('uiSelectCtrl',
   ctrl.searchEnabled = uiSelectConfig.searchEnabled;
   ctrl.sortable = uiSelectConfig.sortable;
   ctrl.refreshDelay = uiSelectConfig.refreshDelay;
+  ctrl.noResults = uiSelectConfig.noResults;
 
   ctrl.removeSelected = false; //If selected item(s) should be removed from dropdown list
   ctrl.closeOnSelect = true; //Initialized inside uiSelect directive link function

src/uiSelectDirective.js

@@ -35,6 +35,7 @@ uis.directive('uiSelect',
         $select.baseTitle = attrs.title || 'Select box';
         $select.focusserTitle = $select.baseTitle + ' focus';
         $select.focusserId = 'focusser-' + $select.generatedId;
+        $select.noResults = tAttrs.noResults || uiSelectConfig.noResults;
 
         $select.closeOnSelect = function() {
           if (angular.isDefined(attrs.closeOnSelect)) {

src/uiSelectMultipleDirective.js

@@ -92,6 +92,10 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
         return resultMultiple;
       });
 
+      ngModel.$isEmpty = function () {
+        return !(angular.isArray(ngModel.$$rawModelValue) && ngModel.$$rawModelValue.length > 0);
+      };
+
       // From model --> view
       ngModel.$formatters.unshift(function (inputValue) {
         var data = $select.parserResult.source (scope, { $select : {search:''}}), //Overwrite $search

test/select.spec.js

@@ -1491,6 +1491,39 @@ describe('ui-select tests', function() {
         expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
       });
 
+      it('should not show "no results" message when it is not defined', function() {
+        setupSelectComponent('true', 'bootstrap');
+
+        el.scope().$select.search = 'idontexist';
+        scope.$digest();
+        expect($(el).find('.ui-select-choices-row:contains("No results :-(")').length).toEqual(0);
+      });
+
+      it('should show "no results" message when it is defined', function() {
+        var choices;
+
+        el = compileTemplate(
+          '<ui-select ng-model="selection.selected" theme="bootstrap" search-enabled="true" no-results="No results :-("> \
+            <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+            <ui-select-choices repeat="person in people | filter: $select.search"> \
+              <div ng-bind-html="person.name | highlight: $select.search"></div> \
+              <div ng-bind-html="person.email | highlight: $select.search"></div> \
+            </ui-select-choices> \
+          </ui-select>'
+        );
+
+        el.scope().$select.search = 'idontexist';
+        scope.$digest();
+        choices = $(el).find('.ui-select-choices-row')
+
+        expect(choices.length).toEqual(1);
+        expect(choices.text()).toEqual('No results :-(');
+
+        el.scope().$select.search = 'ad';
+        scope.$digest();
+        expect($(el).find('.ui-select-choices-row:contains("No results :-(")').length).toEqual(0);
+      });
+
     });
 
   });
@@ -2102,6 +2135,25 @@ describe('ui-select tests', function() {
       expect(searchEl.length).toEqual(1);
       expect(searchEl[0].id).toEqual('inid');
     });
+
+    it('should be marked invalid when required and empty', function() {
+      scope.selection.selectedMultiple = [];
+      var el = createUiSelectMultiple({required: true});
+
+      expect(el.scope().$select.ngModel.$invalid).toEqual(true);
+      expect(el.scope().$select.ngModel.$error.required).toEqual(true);
+
+      clickItem(el, 'Samantha');
+
+      expect(el.scope().$select.ngModel.$invalid).toEqual(false);
+      expect(el.scope().$select.ngModel.$error.required).toEqual(undefined);
+
+      el.find('.ui-select-match-item').first().find('.ui-select-match-close').click();
+      $timeout.flush();
+
+      expect(el.scope().$select.ngModel.$invalid).toEqual(true);
+      expect(el.scope().$select.ngModel.$error.required).toEqual(true);
+    });
   });
 
   it('should add an id to the search input field', function () {