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

Commit 9d89d47

Browse files
author
Brian Feister
committed
Add auto-tokenization functionality and associated demo.
1 parent 7be4c73 commit 9d89d47

File tree

3 files changed

+206
-2
lines changed

3 files changed

+206
-2
lines changed

‎dist/select.js

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* ui-select
33
* http://github.com/angular-ui/ui-select
4-
* Version: 0.8.3 - 2014-10-17T16:24:21.429Z
4+
* Version: 0.8.3 - 2014-10-17T18:44:25.084Z
55
* License: MIT
66
*/
77

@@ -28,6 +28,10 @@
2828
BACKSPACE: 8,
2929
DELETE: 46,
3030
COMMAND: 91,
31+
32+
MAP: { 91 : "COMMAND", 8 : "BACKSPACE" , 9 : "TAB" , 13 : "ENTER" , 16 : "SHIFT" , 17 : "CTRL" , 18 : "ALT" , 19 : "PAUSEBREAK" , 20 : "CAPSLOCK" , 27 : "ESC" , 32 : "SPACE" , 33 : "PAGE_UP", 34 : "PAGE_DOWN" , 35 : "END" , 36 : "HOME" , 37 : "LEFT" , 38 : "UP" , 39 : "RIGHT" , 40 : "DOWN" , 43 : "+" , 44 : "PRINTSCREEN" , 45 : "INSERT" , 46 : "DELETE", 48 : "0" , 49 : "1" , 50 : "2" , 51 : "3" , 52 : "4" , 53 : "5" , 54 : "6" , 55 : "7" , 56 : "8" , 57 : "9" , 59 : ";", 61 : "=" , 65 : "A" , 66 : "B" , 67 : "C" , 68 : "D" , 69 : "E" , 70 : "F" , 71 : "G" , 72 : "H" , 73 : "I" , 74 : "J" , 75 : "K" , 76 : "L", 77 : "M" , 78 : "N" , 79 : "O" , 80 : "P" , 81 : "Q" , 82 : "R" , 83 : "S" , 84 : "T" , 85 : "U" , 86 : "V" , 87 : "W" , 88 : "X" , 89 : "Y" , 90 : "Z", 96 : "0" , 97 : "1" , 98 : "2" , 99 : "3" , 100 : "4" , 101 : "5" , 102 : "6" , 103 : "7" , 104 : "8" , 105 : "9", 106 : "*" , 107 : "+" , 109 : "-" , 110 : "." , 111 : "/", 112 : "F1" , 113 : "F2" , 114 : "F3" , 115 : "F4" , 116 : "F5" , 117 : "F6" , 118 : "F7" , 119 : "F8" , 120 : "F9" , 121 : "F10" , 122 : "F11" , 123 : "F12", 144 : "NUMLOCK" , 145 : "SCROLLLOCK" , 186 : ";" , 187 : "=" , 188 : "SPACE" , 189 : "-" , 190 : "." , 191 : "/" , 192 : "`" , 219 : "[" , 220 : "\\" , 221 : "]" , 222 : "'"
33+
},
34+
3135
isControl: function (e) {
3236
var k = e.which;
3337
switch (k) {
@@ -312,6 +316,9 @@
312316
};
313317

314318
ctrl.isActive = function(itemScope) {
319+
if ( typeof itemScope[ctrl.itemProperty] === 'undefined') {
320+
return false;
321+
}
315322
return ctrl.open && ctrl.items.indexOf(itemScope[ctrl.itemProperty]) === ctrl.activeIndex;
316323
};
317324

@@ -339,6 +346,11 @@
339346
if(ctrl.tagging.isActivated && !item && ctrl.search.length > 0) {
340347
// create new item on the fly
341348
item = ctrl.tagging.fct !== undefined ? ctrl.tagging.fct(ctrl.search) : ctrl.search;
349+
// if(ctrl.taggingTokens.isActivated) {
350+
// setTimeout(function() {}, 10);
351+
// _resetSearchInput();
352+
353+
// }
342354
}
343355

344356
var locals = {};
@@ -535,6 +547,15 @@
535547

536548
if (!processed && (ctrl.items.length > 0 || ctrl.tagging.isActivated)) {
537549
processed = _handleDropDownSelection(key);
550+
if ( ctrl.taggingTokens.isActivated ) {
551+
for (var i = 0; i < ctrl.taggingTokens.tokens.length; i++) {
552+
console.log(ctrl.taggingTokens.tokens[i])
553+
if ( ctrl.taggingTokens.tokens[i] === KEY.MAP[e.keyCode] ) {
554+
ctrl.select(null, true);
555+
_searchInput.triggerHandler('tagged')
556+
}
557+
};
558+
}
538559
}
539560

540561
if (processed && key != KEY.TAB) {
@@ -551,6 +572,14 @@
551572

552573
});
553574

575+
_searchInput.on('tagged', function() {
576+
$timeout(function() {
577+
console.log('tagged');
578+
debugger;
579+
_resetSearchInput();
580+
});
581+
});
582+
554583
_searchInput.on('blur', function() {
555584
$timeout(function() {
556585
ctrl.activeMatchIndex = -1;
@@ -788,6 +817,18 @@
788817
}
789818
});
790819

820+
attrs.$observe('taggingTokens', function() {
821+
if(attrs.tagging !== undefined && attrs.taggingTokens !== undefined)
822+
{
823+
var tokens = attrs.taggingTokens !== undefined ? attrs.taggingTokens.split('|') : [','];
824+
$select.taggingTokens = {isActivated: true, tokens: tokens };
825+
}
826+
else
827+
{
828+
$select.taggingTokens = {isActivated: false, tokens: undefined};
829+
}
830+
});
831+
791832
if ($select.multiple){
792833
scope.$watchCollection(function(){ return ngModel.$modelValue; }, function(newValue, oldValue) {
793834
if (oldValue != newValue)
@@ -999,4 +1040,4 @@ $templateCache.put("select2/select-multiple.tpl.html","<div class=\"ui-select-mu
9991040
$templateCache.put("select2/select.tpl.html","<div class=\"select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open\': $select.open,\n \'select2-container-disabled\': $select.disabled,\n \'select2-container-active\': $select.focus }\"><div class=\"ui-select-match\"></div><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"select2-search\" ng-show=\"$select.searchEnabled\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>");
10001041
$templateCache.put("selectize/choices.tpl.html","<div ng-show=\"$select.open\" class=\"ui-select-choices selectize-dropdown single\"><div class=\"ui-select-choices-content selectize-dropdown-content\"><div class=\"ui-select-choices-group optgroup\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label optgroup-header\">{{$group.name}}</div><div class=\"ui-select-choices-row\" ng-class=\"{active: $select.isActive(this), disabled: $select.isDisabled(this)}\"><div class=\"option ui-select-choices-row-inner\" data-selectable=\"\"></div></div></div></div></div>");
10011042
$templateCache.put("selectize/match.tpl.html","<div ng-hide=\"$select.searchEnabled && ($select.open || $select.isEmpty())\" class=\"ui-select-match\" ng-transclude=\"\"></div>");
1002-
$templateCache.put("selectize/select.tpl.html","<div class=\"selectize-control single\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.activate()\"><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\"></div><div class=\"ui-select-choices\"></div></div>");}]);
1043+
$templateCache.put("selectize/select.tpl.html","<div class=\"selectize-control single\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.activate()\"><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\"></div><div class=\"ui-select-choices\"></div></div>");}]);

‎examples/demo-tagging.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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.3.0-beta.17/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/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="enable()">Enable ui-select</button>
62+
<button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
63+
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
64+
65+
<!-- <h1>Bootstrap theme</h1>
66+
<ui-select ng-model="address.selected"
67+
theme="bootstrap"
68+
ng-disabled="disabled"
69+
reset-search-input="false"
70+
style="width: 300px;">
71+
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
72+
<ui-select-choices repeat="address in addresses track by $index"
73+
refresh="refreshAddresses($select.search)"
74+
refresh-delay="0">
75+
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
76+
</ui-select-choices>
77+
</ui-select>
78+
<p>Selected: {{address.selected.formatted_address}}</p>
79+
80+
<h3>Multi select</h3>
81+
<ui-select multiple ng-model="friends" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
82+
<ui-select-match placeholder="Search and select friends...">{{$item.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+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
87+
</small>
88+
</ui-select-choices>
89+
</ui-select>
90+
<p>Selected: {{friends|json}}</p>
91+
-->
92+
<!-- <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
93+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
94+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
95+
<div ng-bind-html="person.name | highlight: $select.search"></div>
96+
<small>
97+
email: {{person.email}}
98+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
99+
</small>
100+
</ui-select-choices>
101+
</ui-select>
102+
<p>Selected: {{person.selected}}</p> -->
103+
<!-- <h1>Selectize theme</h1>
104+
<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
105+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
106+
<ui-select-choices repeat="country in countries | filter: $select.search">
107+
<span ng-bind-html="country.name | highlight: $select.search"></span>
108+
<small ng-bind-html="country.code | highlight: $select.search"></small>
109+
</ui-select-choices>
110+
</ui-select>
111+
<p>Selected: {{country.selected}}</p> -->
112+
113+
<h1>Multi Selection Demos</h1>
114+
115+
<h3>Simple String Tags</h3>
116+
<ui-select multiple tagging ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
117+
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
118+
<ui-select-choices repeat="color in availableColors | filter:$select.search">
119+
{{color}}
120+
</ui-select-choices>
121+
</ui-select>
122+
<p>Selected: {{multipleDemo.colors}}</p>
123+
<hr>
124+
<h3>Object Tags</h3>
125+
<ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
126+
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
127+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
128+
<div ng-bind-html="person.name | highlight: $select.search"></div>
129+
<small>
130+
email: {{person.email}}
131+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
132+
</small>
133+
</ui-select-choices>
134+
</ui-select>
135+
<h3>Object Tags with Tokenization (Space, Forward Slash, Comma)</h3>
136+
<strong>Note that the SPACE character can't be used literally, use the keyword SPACE</strong>
137+
<ui-select multiple tagging="tagTransform" tagging-tokens="SPACE|,|/" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
138+
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
139+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
140+
<div ng-bind-html="person.name | highlight: $select.search"></div>
141+
<small>
142+
email: {{person.email}}
143+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
144+
</small>
145+
</ui-select-choices>
146+
</ui-select>
147+
<p>Selected: {{multipleDemo.selectedPeople}}</p>
148+
149+
<div style="height:500px"></div>
150+
151+
</body>
152+
</html>

‎examples/demo.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,17 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
106106
};
107107
};
108108

109+
$scope.tagTransform = function (newTag) {
110+
var item = {
111+
name: newTag,
112+
email: newTag+'@email.com',
113+
age: 'unknown',
114+
country: 'unknown'
115+
};
116+
117+
return item;
118+
};
119+
109120
$scope.person = {};
110121
$scope.people = [
111122
{ name: 'Adam', email: '[email protected]', age: 12, country: 'United States' },

0 commit comments

Comments
 (0)