diff --git a/examples/demo-disable-search.html b/examples/demo-disable-search.html new file mode 100644 index 000000000..2b92d02b3 --- /dev/null +++ b/examples/demo-disable-search.html @@ -0,0 +1,102 @@ + + + + + AngularJS ui-select + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Bootstrap theme

+

Selected: {{person.selected}}

+ + {{$select.selected.name}} + +
+ + email: {{person.email}} + age: + + + + +

Select2 theme

+

Selected: {{person.selected}}

+ + {{$select.selected.name}} + +
+ + email: {{person.email}} + age: + + + + +

Selectize theme

+

Selected: {{country.selected}}

+ + {{$select.selected.name}} + + + + + + + diff --git a/examples/demo.js b/examples/demo.js index d565c59a9..3827a27f3 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -41,6 +41,7 @@ app.filter('propsFilter', function() { app.controller('DemoCtrl', function($scope, $http, $timeout) { $scope.disabled = undefined; + $scope.searchEnabled = undefined; $scope.enable = function() { $scope.disabled = false; @@ -50,6 +51,14 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) { $scope.disabled = true; }; + $scope.enableSearch = function() { + $scope.searchEnabled = true; + } + + $scope.disableSearch = function() { + $scope.searchEnabled = false; + } + $scope.clear = function() { $scope.person.selected = undefined; $scope.address.selected = undefined; diff --git a/src/bootstrap/match.tpl.html b/src/bootstrap/match.tpl.html index 10506fb07..2f9ed340a 100644 --- a/src/bootstrap/match.tpl.html +++ b/src/bootstrap/match.tpl.html @@ -3,7 +3,7 @@ ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}"; ng-click="$select.activate()"> - {{$select.placeholder}} + {{$select.placeholder}} diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html index a8681c9b3..4cec1a311 100644 --- a/src/bootstrap/select.tpl.html +++ b/src/bootstrap/select.tpl.html @@ -4,6 +4,6 @@ class="form-control ui-select-search" placeholder="{{$select.placeholder}}" ng-model="$select.search" - ng-show="$select.open"> + ng-show="$select.searchEnabled && $select.open">
diff --git a/src/select.js b/src/select.js index c46fde87c..dd1c489c4 100644 --- a/src/select.js +++ b/src/select.js @@ -20,6 +20,7 @@ .constant('uiSelectConfig', { theme: 'bootstrap', + searchEnabled: true, placeholder: '', // Empty by default, like HTML tag diff --git a/src/selectize/match.tpl.html b/src/selectize/match.tpl.html index a72e9c26e..dff19ce86 100644 --- a/src/selectize/match.tpl.html +++ b/src/selectize/match.tpl.html @@ -1 +1 @@ -
+
diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html index bc2436087..34fd4f72c 100644 --- a/src/selectize/select.tpl.html +++ b/src/selectize/select.tpl.html @@ -7,7 +7,7 @@ class="ui-select-search" placeholder="{{$select.placeholder}}" ng-model="$select.search" - ng-hide="$select.selected && !$select.open" + ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)" ng-disabled="$select.disabled">
diff --git a/test/select.spec.js b/test/select.spec.js index 1a6d09b7f..3897bbc8d 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -552,4 +552,66 @@ describe('ui-select tests', function() { }); + describe('search-enabled option', function() { + + var el; + + function setupSelectComponent(searchEnabled, theme) { + el = compileTemplate( + ' \ + {{$select.selected.name}} \ + \ +
\ +
\ + \ + ' + ); + } + + describe('selectize theme', function() { + + it('should show search input when true', function() { + setupSelectComponent('true', 'selectize'); + expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide'); + }); + + it('should hide search input when false', function() { + setupSelectComponent('false', 'selectize'); + expect($(el).find('.ui-select-search')).toHaveClass('ng-hide'); + }); + + }); + + describe('select2 theme', function() { + + it('should show search input when true', function() { + setupSelectComponent('true', 'select2'); + expect($(el).find('.select2-search')).not.toHaveClass('ng-hide'); + }); + + it('should hide search input when false', function() { + setupSelectComponent('false', 'select2'); + expect($(el).find('.select2-search')).toHaveClass('ng-hide'); + }); + + }); + + describe('bootstrap theme', function() { + + it('should show search input when true', function() { + setupSelectComponent('true', 'bootstrap'); + clickMatch(el); + expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide'); + }); + + it('should hide search input when false', function() { + setupSelectComponent('false', 'bootstrap'); + clickMatch(el); + expect($(el).find('.ui-select-search')).toHaveClass('ng-hide'); + }); + + }); + + }); + });