Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit 59ddf64

Browse files
dimircdimirc
committed
Merge pull request #166 from jverghese/disable-search-option
Add support to disable search feature.
2 parents 061fb66 + 2782103 commit 59ddf64

File tree

10 files changed

+186
-6
lines changed

10 files changed

+186
-6
lines changed

‎examples/demo-disable-search.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<script src="demo.js"></script>
30+
31+
<!-- Select2 theme -->
32+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
33+
34+
<!--
35+
Selectize theme
36+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
37+
-->
38+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
39+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
40+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
41+
42+
<style>
43+
body {
44+
padding: 15px;
45+
}
46+
47+
.select2 > .select2-choice.ui-select-match {
48+
/* Because of the inclusion of Bootstrap */
49+
height: 29px;
50+
}
51+
52+
.selectize-control > .selectize-dropdown {
53+
top: 36px;
54+
}
55+
</style>
56+
</head>
57+
58+
<body ng-controller="DemoCtrl">
59+
<script src="demo.js"></script>
60+
61+
<button class="btn btn-default btn-xs" ng-click="enableSearch()">Enable search</button>
62+
<button class="btn btn-default btn-xs" ng-click="disableSearch()">Disable search</button>
63+
64+
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
65+
66+
<h3>Bootstrap theme</h3>
67+
<p>Selected: {{person.selected}}</p>
68+
<ui-select ng-model="person.selected" theme="bootstrap" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;">
69+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
70+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
71+
<div ng-bind-html="person.name | highlight: $select.search"></div>
72+
<small>
73+
email: {{person.email}}
74+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
75+
</small>
76+
</ui-select-choices>
77+
</ui-select>
78+
79+
<h3>Select2 theme</h3>
80+
<p>Selected: {{person.selected}}</p>
81+
<ui-select ng-model="person.selected" theme="select2" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;">
82+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
83+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
84+
<div ng-bind-html="person.name | highlight: $select.search"></div>
85+
<small>
86+
email: {{person.email}}
87+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
88+
</small>
89+
</ui-select-choices>
90+
</ui-select>
91+
92+
<h3>Selectize theme</h3>
93+
<p>Selected: {{country.selected}}</p>
94+
<ui-select ng-model="country.selected" theme="selectize" search-enabled="searchEnabled" ng-disabled="disabled" style="width: 300px;">
95+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
96+
<ui-select-choices repeat="country in countries | filter: $select.search">
97+
<span ng-bind-html="country.name | highlight: $select.search"></span>
98+
<small ng-bind-html="country.code | highlight: $select.search"></small>
99+
</ui-select-choices>
100+
</ui-select>
101+
</body>
102+
</html>

‎examples/demo.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ app.filter('propsFilter', function() {
4141

4242
app.controller('DemoCtrl', function($scope, $http, $timeout) {
4343
$scope.disabled = undefined;
44+
$scope.searchEnabled = undefined;
4445

4546
$scope.enable = function() {
4647
$scope.disabled = false;
@@ -50,6 +51,14 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
5051
$scope.disabled = true;
5152
};
5253

54+
$scope.enableSearch = function() {
55+
$scope.searchEnabled = true;
56+
}
57+
58+
$scope.disableSearch = function() {
59+
$scope.searchEnabled = false;
60+
}
61+
5362
$scope.clear = function() {
5463
$scope.person.selected = undefined;
5564
$scope.address.selected = undefined;

‎src/bootstrap/match.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
ng-disabled="$select.disabled"
44
ng-class="{'btn-default-focus':$select.focus}";
55
ng-click="$select.activate()">
6-
<span ng-show="$select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
6+
<span ng-show="$select.searchEnabled && $select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
77
<span ng-hide="$select.isEmpty()" ng-transclude></span>
88
<span class="caret"></span>
99
</button>

‎src/bootstrap/select.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
class="form-control ui-select-search"
55
placeholder="{{$select.placeholder}}"
66
ng-model="$select.search"
7-
ng-show="$select.open">
7+
ng-show="$select.searchEnabled && $select.open">
88
<div class="ui-select-choices"></div>
99
</div>

‎src/select.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
.constant('uiSelectConfig', {
2222
theme: 'bootstrap',
23+
searchEnabled: true,
2324
placeholder: '', // Empty by default, like HTML tag <select>
2425
refreshDelay: 1000 // In milliseconds
2526
})
@@ -107,6 +108,7 @@
107108
ctrl.focus = false;
108109
ctrl.focusser = undefined; //Reference to input element used to handle focus events
109110
ctrl.disabled = undefined; // Initialized inside uiSelect directive link function
111+
ctrl.searchEnabled = undefined; // Initialized inside uiSelect directive link function
110112
ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function
111113
ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function
112114

@@ -486,6 +488,11 @@
486488
}
487489
};
488490

491+
scope.$watch('searchEnabled', function() {
492+
var searchEnabled = scope.$eval(attrs.searchEnabled);
493+
$select.searchEnabled = searchEnabled !== undefined ? searchEnabled : true;
494+
});
495+
489496
attrs.$observe('disabled', function() {
490497
// No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
491498
$select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;

‎src/select2/match.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<a class="select2-choice ui-select-match"
77
ng-class="{'select2-default': $select.isEmpty()}"
88
ng-click="$select.activate()">
9-
<span ng-show="$select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
9+
<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
1010
<span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>
1111
<span class="select2-arrow"><b></b></span>
1212
</a>

‎src/select2/select.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="ui-select-match"></div>
66
<div class="select2-drop select2-with-searchbox select2-drop-active"
77
ng-class="{'select2-display-none': !$select.open}">
8-
<div class="select2-search">
8+
<div class="select2-search" ng-show="$select.searchEnabled">
99
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
1010
class="ui-select-search select2-input"
1111
ng-model="$select.search">

‎src/selectize/match.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div ng-hide="$select.open || $select.isEmpty()" class="ui-select-match" ng-transclude></div>
1+
<div ng-hide="$select.searchEnabled && ($select.open || $select.isEmpty())" class="ui-select-match" ng-transclude></div>

‎src/selectize/select.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
class="ui-select-search"
88
placeholder="{{$select.placeholder}}"
99
ng-model="$select.search"
10-
ng-hide="$select.selected && !$select.open"
10+
ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)"
1111
ng-disabled="$select.disabled">
1212
</div>
1313
<div class="ui-select-choices"></div>

‎test/select.spec.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -552,4 +552,66 @@ describe('ui-select tests', function() {
552552

553553
});
554554

555+
describe('search-enabled option', function() {
556+
557+
var el;
558+
559+
function setupSelectComponent(searchEnabled, theme) {
560+
el = compileTemplate(
561+
'<ui-select ng-model="selection.selected" theme="' + theme + '" search-enabled="' + searchEnabled + '"> \
562+
<ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
563+
<ui-select-choices repeat="person in people | filter: $select.search"> \
564+
<div ng-bind-html="person.name | highlight: $select.search"></div> \
565+
<div ng-bind-html="person.email | highlight: $select.search"></div> \
566+
</ui-select-choices> \
567+
</ui-select>'
568+
);
569+
}
570+
571+
describe('selectize theme', function() {
572+
573+
it('should show search input when true', function() {
574+
setupSelectComponent('true', 'selectize');
575+
expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
576+
});
577+
578+
it('should hide search input when false', function() {
579+
setupSelectComponent('false', 'selectize');
580+
expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
581+
});
582+
583+
});
584+
585+
describe('select2 theme', function() {
586+
587+
it('should show search input when true', function() {
588+
setupSelectComponent('true', 'select2');
589+
expect($(el).find('.select2-search')).not.toHaveClass('ng-hide');
590+
});
591+
592+
it('should hide search input when false', function() {
593+
setupSelectComponent('false', 'select2');
594+
expect($(el).find('.select2-search')).toHaveClass('ng-hide');
595+
});
596+
597+
});
598+
599+
describe('bootstrap theme', function() {
600+
601+
it('should show search input when true', function() {
602+
setupSelectComponent('true', 'bootstrap');
603+
clickMatch(el);
604+
expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
605+
});
606+
607+
it('should hide search input when false', function() {
608+
setupSelectComponent('false', 'bootstrap');
609+
clickMatch(el);
610+
expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
611+
});
612+
613+
});
614+
615+
});
616+
555617
});

0 commit comments

Comments
 (0)