4 |
5 | This is a reinvention of the select view. It is designed to offer a [Bootstrap][1] style and function. It is highly inspired from the jQuery plugin [bootstrap-select][2] but designed for Ember-CLI apps specifically. It supports single and multiple select. It adds select all/none, and search filtering for multiple selections.
6 |
7 | See the [demo][] for examples, usage, and code snippits.
8 |
9 | [1]: http://getbootstrap.com/
10 | [2]: http://silviomoreto.github.io/bootstrap-select/
11 |
12 | ## Dependencies
13 |
14 | Version 2.0 is designed for Ember CLI 1.13 or greater. If you want to use an older unsupported version of ember take a look at the last 1.x release.
15 |
16 | ## Installation
17 |
18 | * `ember install ember-cli-select-picker`
19 |
20 | ## Using
21 |
22 | In your templates simply replace the usual `{{select …}}` with `{{select-picker …}}`. This addon is implemented as a component since the core Ember team is deprecating views. It is down-grades (read: backwards compatible) to mobile by keeping a select view in sync under the hood.
23 |
24 | More options and examples are available on the [demo][] site.
25 |
26 | ```handlebars
27 | {{select-picker value=myModel.myAttr
28 | content=mySelectContents
29 | optionGroupPath="group"
30 | optionLabelPath="content.label"
31 | optionValuePath="content.value"}}
32 | ```
33 |
34 | ## Running Tests
35 |
36 | * `npm test` - Test with Ember release, beta, and canary
37 | * `ember test`
38 | * `ember test --server`
39 |
40 | ## Building
41 |
42 | * `ember build`
43 |
44 | For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
45 |
46 | [demo]: https://sukima.github.io/ember-cli-select-picker/
47 |
--------------------------------------------------------------------------------
/addon/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sukima/ember-cli-select-picker/ea014668ae740d2f72375e91aa3de3e9e2e48b80/addon/.gitkeep
--------------------------------------------------------------------------------
/addon/mixins/item-cursor.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | export default Ember.Mixin.create({
4 | activeCursor: null,
5 | previousActiveIndex: 0,
6 |
7 | updateActiveItem: Ember.observer(
8 | 'activeCursor', 'contentList.length',
9 | function() {
10 | const previousActiveIndex = this.get('previousActiveIndex');
11 | const activeIndex = this.get('activeIndex');
12 | if (Ember.typeOf(activeIndex) !== 'number') { return; }
13 | this.set(`contentList.${previousActiveIndex}.active`, false);
14 | this.set(`contentList.${activeIndex}.active`, true);
15 | this.set('previousActiveIndex', activeIndex);
16 | }
17 | ),
18 |
19 | activeIndex: Ember.computed(
20 | 'activeCursor', 'contentList.length',
21 | function() {
22 | var cursor = this.get('activeCursor');
23 | if (Ember.isNone(cursor)) {
24 | return null;
25 | }
26 | var len = this.get('contentList.length');
27 | return (cursor % len + len) % len;
28 | }
29 | ),
30 |
31 | activeItem: Ember.computed(
32 | 'activeIndex', 'contentList.[]',
33 | function() {
34 | return this.get('contentList').objectAt(this.get('activeIndex'));
35 | }
36 | ),
37 |
38 | actions: {
39 | activeNext() {
40 | if (Ember.isNone(this.get('activeCursor'))) {
41 | this.set('activeCursor', 0);
42 | } else {
43 | this.incrementProperty('activeCursor');
44 | }
45 | },
46 |
47 | activePrev() {
48 | if (Ember.isNone(this.get('activeCursor'))) {
49 | this.set('activeCursor', -1);
50 | } else {
51 | this.decrementProperty('activeCursor');
52 | }
53 | },
54 |
55 | selectActiveItem() {
56 | var item = this.get('activeItem');
57 | if (Ember.isPresent(item)) {
58 | this.send('selectItem', item);
59 | }
60 | },
61 | }
62 | });
63 |
--------------------------------------------------------------------------------
/addon/mixins/select-picker.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 |
3 | // Ember Addons need to be coded as if Ember.EXTEND_PROTOTYPES = false
4 | // Because of this we need to make our own proxy functions to apply as one offs
5 | // to native arrays.
6 | const emberArrayFunc = function(method) {
7 | return function(ctx, ...args) {
8 | let enumeral = Ember.A(ctx);
9 | Ember.assert(
10 | `Ember.Enumerable has no method ${method}`,
11 | Ember.typeOf(enumeral[method]) === 'function'
12 | );
13 | let result = enumeral[method](...args);
14 | if (Ember.typeOf(result) === 'array') {
15 | return Ember.A(result);
16 | } else {
17 | return result;
18 | }
19 | };
20 | };
21 | const _contains = emberArrayFunc(
22 | // Backwards compatability for Ember < 2.x
23 | Ember.Enumerable.keys().indexOf('includes') !== -1 ?
24 | 'includes' :
25 | 'contains'
26 | );
27 | const _mapBy = emberArrayFunc('mapBy');
28 | const _filterBy = emberArrayFunc('filterBy');
29 | const _findBy = emberArrayFunc('findBy');
30 | const _uniq = emberArrayFunc('uniq');
31 | const _compact = emberArrayFunc('compact');
32 |
33 | const selectOneOf = function(someSelected,
34 | allSelected,
35 | noneSelected) {
36 | return Ember.computed(
37 | 'hasSelectedItems', 'allItemsSelected',
38 | function() {
39 | if (this.get('allItemsSelected')) {
40 | return allSelected.call(this);
41 | } else if (this.get('hasSelectedItems')) {
42 | return someSelected.call(this);
43 | } else {
44 | return noneSelected.call(this);
45 | }
46 | }
47 | );
48 | };
49 |
50 | const selectOneOfValue = function(someSelectedValue,
51 | allSelectedValue,
52 | noneSelectedValue) {
53 | return selectOneOf(
54 | function() { return someSelectedValue; },
55 | function() { return allSelectedValue; },
56 | function() { return noneSelectedValue; }
57 | );
58 | };
59 |
60 | const selectOneOfProperty = function(someSelectedKey,
61 | allSelectedKey,
62 | noneSelectedKey) {
63 | return selectOneOf(
64 | function() { return this.get(someSelectedKey); },
65 | function() { return this.get(allSelectedKey); },
66 | function() { return this.get(noneSelectedKey); }
67 | );
68 | };
69 |
70 | const isAdvancedSearch = function(liveSearch) {
71 | return (
72 | Ember.typeOf(liveSearch) === 'string' &&
73 | liveSearch.toLowerCase() === 'advanced'
74 | );
75 | };
76 |
77 | export default Ember.Mixin.create({
78 | liveSearch: false,
79 | showDropdown: false,
80 | promptMessage: 'Please select an option',
81 | prompt: Ember.computed.bool('promptMessage'),
82 |
83 | showNativePrompt: Ember.computed(
84 | 'multiple', 'prompt',
85 | function() {
86 | return !this.get('multiple') && Ember.isPresent(this.get('prompt'));
87 | }
88 | ),
89 |
90 | menuButtonId: Ember.computed(
91 | 'elementId',
92 | function() {
93 | return this.get('elementId') + '-dropdown-menu';
94 | }
95 | ),
96 |
97 | selectionAsArray: function() {
98 | return Ember.makeArray(this.get('selection'));
99 | },
100 |
101 | contentList: Ember.computed(
102 | 'selection.[]', 'content.[]', 'optionGroupPath',
103 | 'optionLabelPath', 'optionValuePath', 'searchFilter',
104 | function() {
105 | // Ember.Select does not include the content prefix for optionGroupPath
106 | var groupPath = this.get('optionGroupPath');
107 | // Ember.Select expects optionLabelPath and optionValuePath to have a
108 | // `content.` prefix
109 | var labelPath = this.contentPathName('optionLabelPath');
110 | var valuePath = this.contentPathName('optionValuePath');
111 | // selection is either an object or an array of object depending on the
112 | // value of the multiple property. Ember.Select maintains the value
113 | // property.
114 | var selection = this.selectionAsArray().map(function(item) {
115 | return valuePath ? Ember.get(item, valuePath) : item;
116 | });
117 | var searchMatcher = this.makeSearchMatcher();
118 |
119 | var result = _compact(Ember.makeArray(this.get('content'))
120 | .map(function(item, index) {
121 | const label = labelPath ? Ember.get(item, labelPath) : item;
122 | const value = valuePath ? Ember.get(item, valuePath) : item;
123 | const group = groupPath ? Ember.get(item, groupPath) : null;
124 | if (searchMatcher(group) || searchMatcher(label)) {
125 | return Ember.Object.create({
126 | item: item,
127 | itemId: index,
128 | group: group,
129 | label: label,
130 | value: value,
131 | selected: _contains(selection, value)
132 | });
133 | } else {
134 | return null;
135 | }
136 | }));
137 |
138 | if (Ember.isPresent(result)) {
139 | result.set('firstObject.first', true);
140 | }
141 |
142 | return result;
143 | }
144 | ),
145 |
146 | nestedGroupContentList: Ember.computed(
147 | 'contentList.[].group',
148 | function() {
149 | const contentList = this.get('contentList');
150 | const groups = _uniq(_mapBy(contentList, 'group'));
151 | const results = Ember.A();
152 | groups.forEach(function(group) {
153 | results.pushObject(Ember.Object.create({
154 | name: group,
155 | items: _filterBy(contentList, 'group', group)
156 | }));
157 | });
158 | return results;
159 | }
160 | ),
161 |
162 | contentPathName: function(pathName) {
163 | return this.getWithDefault(pathName, '').substr(8);
164 | },
165 |
166 | getByContentPath: function(obj, pathName) {
167 | return Ember.get(obj, this.contentPathName(pathName));
168 | },
169 |
170 | selectedContentList: Ember.computed.filterBy('contentList', 'selected'),
171 | unselectedContentList: Ember.computed.setDiff('contentList', 'selectedContentList'),
172 | hasSelectedItems: Ember.computed.gt('selection.length', 0),
173 | allItemsSelected: Ember.computed(
174 | 'selection.length', 'content.length',
175 | function() {
176 | return Ember.isEqual(this.get('selection.length'), this.get('content.length'));
177 | }
178 | ),
179 |
180 | glyphiconClass: selectOneOfValue('glyphicon-minus', 'glyphicon-ok', ''),
181 | selectAllNoneLabel: selectOneOfProperty('selectNoneLabel', 'selectNoneLabel', 'selectAllLabel'),
182 |
183 | makeSearchMatcher: function () {
184 | var searchFilter = this.get('searchFilter');
185 | // item can be null, string, or SafeString.
186 | // SafeString does not have toLowerCase() so use toString() to
187 | // normalize it.
188 | if (Ember.isEmpty(searchFilter)) {
189 | return function () {
190 | return true; // Show all
191 | };
192 | } else if (isAdvancedSearch(this.get('liveSearch'))) {
193 | searchFilter = new RegExp(searchFilter.split('').join('.*'), 'i');
194 | return function (item) {
195 | if (Ember.isNone(item)) {
196 | return false;
197 | } else {
198 | return searchFilter.test(item.toString());
199 | }
200 | };
201 | } else {
202 | searchFilter = searchFilter.toLowerCase();
203 | return function (item) {
204 | if (Ember.isNone(item)) {
205 | return false;
206 | } else {
207 | return item.toString().toLowerCase().indexOf(searchFilter) >= 0;
208 | }
209 | };
210 | }
211 | },
212 |
213 | selectionLabels: Ember.computed.mapBy('selectedContentList', 'label'),
214 |
215 | selectionSummary: Ember.computed(
216 | 'selectionLabels.[]', 'nothingSelectedMessage', 'multipleSelectedMessage',
217 | 'summaryMessage', 'summaryMessageKey',
218 | function() {
219 | var selection = this.get('selectionLabels');
220 | var count = selection.get('length');
221 | var messageKey = this.get('summaryMessageKey');
222 | var message = this.get('summaryMessage');
223 | if (Ember.I18n && Ember.isPresent(messageKey)) {
224 | // TODO: Allow an enablePrompt="false" feature
225 | if (count === 0) {
226 | return this.get('nothingSelectedMessage');
227 | }
228 | var item = selection.get('firstObject');
229 | var translation = Ember.I18n.t(messageKey, {
230 | count: count,
231 | item: item,
232 | list: selection.join(', ')
233 | });
234 | // I18n is returning a string that's been escaped, we don't want the
235 | // string to get escaped again.
236 | return Ember.String.htmlSafe(translation);
237 | } else if (Ember.isPresent(message)) {
238 | return message;
239 | } else {
240 | switch (count) {
241 | case 0:
242 | return this.get('nothingSelectedMessage');
243 | case 1:
244 | return selection.get('firstObject');
245 | default:
246 | return Ember.String.fmt(
247 | this.get('multipleSelectedMessage'),
248 | count,
249 | selection.get('firstObject'),
250 | selection.join(', ')
251 | );
252 | }
253 | }
254 | }
255 | ),
256 |
257 | clearSearchDisabled: Ember.computed.empty('searchFilter'),
258 |
259 | toggleSelection: function(value) {
260 | var selection = Ember.A(this.get('selection'));
261 | if (_contains(selection, value)) {
262 | selection.removeObject(value);
263 | } else {
264 | selection.pushObject(value);
265 | }
266 | this.set('selection', selection);
267 | },
268 |
269 | selectAnItem: function(selected) {
270 | if (!this.get('disabled')) {
271 | if (this.get('multiple')) {
272 | this.set('keepDropdownOpen', true);
273 | this.toggleSelection(selected.get('item'));
274 | } else {
275 | this.setProperties({
276 | // TODO: value will be removed in the future
277 | value: selected.get('value'),
278 | selection: selected.get('item')
279 | });
280 | }
281 | }
282 | },
283 |
284 | sendChangeAction: function() {
285 | const changeAction = Ember.get(this, 'attrs.action');
286 | if (changeAction) {
287 | changeAction(this.get('selection'));
288 | }
289 | },
290 |
291 | actions: {
292 | selectItem(selected) {
293 | if (this.get('disabled')) { return true; }
294 | this.selectAnItem(selected);
295 | this.sendChangeAction();
296 | return false;
297 | },
298 |
299 | selectAllNone(listName) {
300 | if (this.get('disabled')) { return true; }
301 | this.get(listName).forEach(Ember.run.bind(this, this.selectAnItem));
302 | this.sendChangeAction();
303 | return false;
304 | },
305 |
306 | selectByValue() {
307 | if (this.get('disabled')) { return true; }
308 | const hasPrompt = Ember.isPresent(this.get('prompt'));
309 | const contentList = this.get('contentList');
310 | const selectedValues = Ember.makeArray(this.$('select').val());
311 | if (this.get('multiple')) {
312 | this.set('selection', contentList.filter(function(item) {
313 | return selectedValues.indexOf(item.get('value')) !== -1;
314 | }));
315 | } else if (hasPrompt && Ember.isEmpty(selectedValues[0])) {
316 | this.setProperties({value: null, selection: null});
317 | } else {
318 | this.send('selectItem', _findBy(contentList, 'value', selectedValues[0]));
319 | }
320 | this.sendChangeAction();
321 | },
322 |
323 | toggleSelectAllNone() {
324 | var listName;
325 | if (this.get('hasSelectedItems')) {
326 | listName = 'selectedContentList';
327 | } else {
328 | listName = 'unselectedContentList';
329 | }
330 | this.send('selectAllNone', listName);
331 | return false;
332 | },
333 |
334 | clearFilter() {
335 | this.set('searchFilter', null);
336 | return false;
337 | }
338 | }
339 | });
340 |
--------------------------------------------------------------------------------
/app/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sukima/ember-cli-select-picker/ea014668ae740d2f72375e91aa3de3e9e2e48b80/app/.gitkeep
--------------------------------------------------------------------------------
/app/components/keyboard-select-picker.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import SelectPicker from './select-picker';
3 | import ItemCursorMixin from 'ember-cli-select-picker/mixins/item-cursor';
4 |
5 | const KEY_ENTER = 13;
6 | const KEY_ESC = 27;
7 | const KEY_UP = 38;
8 | const KEY_DOWN = 40;
9 |
10 | export default SelectPicker.extend(ItemCursorMixin, {
11 | layoutName: 'components/select-picker',
12 | classNames: ['select-picker', 'keyboard-select-picker'],
13 |
14 | didInsertElement() {
15 | this.$().on(`keydown.${this.get('elementId')}`,
16 | Ember.run.bind(this, 'handleKeyPress'));
17 | },
18 |
19 | willDestroyElement() {
20 | this.$().off(`keydown.${this.get('elementId')}`);
21 | },
22 |
23 | focusActiveItem() {
24 | this.$(`[data-itemid=${this.get('activeItem.itemId')}]`).focus();
25 | },
26 |
27 | handleKeyPress(e) {
28 | var actionName = (() => {
29 | switch (e.which) {
30 | case KEY_DOWN: return 'activeNext';
31 | case KEY_UP: return 'activePrev';
32 | case KEY_ESC: return 'closeDropdown';
33 | case KEY_ENTER:
34 | return this.get('showDropdown') ?
35 | 'selectActiveItem' :
36 | 'openDropdown';
37 | default: return null;
38 | }
39 | })();
40 |
41 | if (actionName) {
42 | e.preventDefault();
43 | Ember.run(() => { this.send(actionName); });
44 | this.focusActiveItem();
45 | return false;
46 | }
47 |
48 | return true;
49 | }
50 | });
51 |
--------------------------------------------------------------------------------
/app/components/list-picker.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import SelectPickerMixin from 'ember-cli-select-picker/mixins/select-picker';
3 |
4 | var I18nProps = (Ember.I18n && Ember.I18n.TranslateableProperties) || {};
5 |
6 | export default Ember.Component.extend(
7 | SelectPickerMixin, I18nProps,
8 | {
9 | classNames: ['select-picker', 'list-picker'],
10 | selectAllLabel: 'Select All',
11 | selectNoneLabel: 'Select None',
12 | nativeMobile: false
13 | }
14 | );
15 |
--------------------------------------------------------------------------------
/app/components/select-picker.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember';
2 | import SelectPickerMixin from 'ember-cli-select-picker/mixins/select-picker';
3 |
4 | var I18nProps = (Ember.I18n && Ember.I18n.TranslateableProperties) || {};
5 |
6 | export default Ember.Component.extend(
7 | SelectPickerMixin, I18nProps, {
8 |
9 | nothingSelectedMessage: 'Nothing Selected',
10 | multipleSelectedMessage: '%@ items selected',
11 | selectAllLabel: 'All',
12 | selectNoneLabel: 'None',
13 |
14 | nativeMobile: true,
15 |
16 | classNames: ['select-picker', 'btn-group'],
17 | buttonClass: 'btn-default',
18 |
19 | badgeEnabled: Ember.computed.and('showBadge', 'multiple'),
20 |
21 | selectionBadge: Ember.computed(
22 | 'selection.length', 'badgeEnabled',
23 | function() {
24 | const enabled = this.get('badgeEnabled');
25 | const selected = this.get('selection.length');
26 | return (enabled && selected && selected !== 0) ? selected : '';
27 | }
28 | ),
29 |
30 | setupDom: Ember.on('didInsertElement', function() {
31 | const id = this.get('elementId');
32 | Ember.run.scheduleOnce('afterRender', this, this.updateDropUp);
33 | $(document)
34 | .on(`click.${id}`, Ember.run.bind(this, this.hideDropdownMenu))
35 | .on(`touchstart.${id}`, Ember.run.bind(this, this.hideDropdownMenu))
36 | .on(`scroll.${id}`, Ember.run.bind(this, this.updateDropUp))
37 | .on(`resize.${id}`, Ember.run.bind(this, this.updateDropUp));
38 | }),
39 |
40 | hideDropdownMenu: function(evt) {
41 | if (this.get('keepDropdownOpen')) {
42 | this.set('keepDropdownOpen', false);
43 | return;
44 | }
45 | if (this.element && !$.contains(this.element, evt.target)) {
46 | this.send('closeDropdown');
47 | }
48 | },
49 |
50 | updateDropUp() {
51 | const windowHeight = $(window).height();
52 | const scrollTop = $(window).scrollTop();
53 | const buttonOffset = this.$().offset().top;
54 | const buttonHeight = this.$().height();
55 | const menuHeight = this.$('.dropdown-menu').height();
56 | const viewportOffset = buttonOffset - scrollTop;
57 | const menuBottom = viewportOffset + buttonHeight + menuHeight;
58 | this.set('isDropUp', menuBottom > windowHeight);
59 | },
60 |
61 | teardownDom: Ember.on('willDestroyElement', function() {
62 | $(document).off(`.${this.get('elementId')}`);
63 | }),
64 |
65 | actions: {
66 | showHide() {
67 | this.toggleProperty('showDropdown');
68 | },
69 |
70 | openDropdown() {
71 | this.set('showDropdown', true);
72 | },
73 |
74 | closeDropdown() {
75 | this.set('showDropdown', false);
76 | }
77 | }
78 | });
79 |
--------------------------------------------------------------------------------
/app/templates/components/-native-select.hbs:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/app/templates/components/list-picker.hbs:
--------------------------------------------------------------------------------
1 | {{#if nativeMobile}}
2 | An Ember based reinvention of the select picker for Bootstrap 3.
5 |Version: {{addonVersion}}
6 | 7 | 27 | 28 |{{yield}}To use i18n support you first need to install the ember-i18n addon to your applicaiton project.
$ ember install ember-i18n8 |
Because translated properties can not have interpolated values the summaryMessage uses summaryMessageKey instead of summaryMessageTranslation. It has the following values:
nothingSelectedMessage is used instead.Results: {{singleChoiceStr}}
9 |{{select-picker content=singleContent 14 | selection=singleChoice 15 | action=(action "setSingleChoice") 16 | optionLabelPath="content.label" 17 | optionValuePath="content.value"}}
18 |Results: {{multipleChoicesStr}}
40 |{{select-picker content=multipleContent 45 | selection=multipleChoices 46 | action=(action "setMultipleChoices") 47 | multiple=true 48 | optionGroupPath="group" 49 | optionLabelPath="content.label" 50 | optionValuePath="content.value"}}
51 |Results: {{listChoicesStr}}
76 |{{list-picker content=listContent 81 | selection=listChoices 82 | action=(action "setListChoices") 83 | multiple="true" 84 | optionGroupPath="group" 85 | optionLabelPath="content.label" 86 | optionValuePath="content.value"}}
87 |This is an Ember CLI Addon and can be installed through the ember command.
$ ember install ember-cli-select-picker8 |
Contributions are welcome. All source code is managed through GitHub.
17 |18 | 19 | View source on GitHub 20 | 21 |
22 |To use keyboard support you first need to install the ember-keyboard-shortcuts addon to your applicaiton project.
$ ember install ember-keyboard-shortcuts8 |
| Key | 13 |Action | 14 |
|---|---|
| Esc | 19 |Close the dropdown list | 20 |
| Enter | 23 |Open the dropdown list or Select/Unselect item the cursor is on | 24 |
| Down | 27 |Move cursor to next item | 28 |
| Up | 31 |Move cursor to previous item | 32 |
Results: {{singleChoiceStr}}
45 |Results: {{multipleChoicesStr}}
76 |Results: {{multipleChoicesStr}}
9 |{{select-picker content=multipleContent 14 | selection=multipleChoices 15 | action=(action "setMultipleChoices") 16 | multiple=true 17 | showBadge=true 18 | summaryMessage="Multiple items selected" 19 | optionLabelPath="content.label" 20 | optionValuePath="content.value"}}
21 |By default the native select widget is used for small screens (mobile) If you want the Bootstrap styled picker on mobile devices then you need to set nativeMobile to false.
Results: {{multipleChoicesStr}}
47 |{{select-picker content=multipleContent 52 | selection=multipleChoices 53 | action=(action "setMultipleChoices") 54 | multiple=true 55 | nativeMobile=false 56 | optionLabelPath="content.label" 57 | optionValuePath="content.value"}}
58 |You can add your own custom content to the top of the drop down by using Ember's block syntax.
82 |Results: {{multipleChoicesStr}}
83 |{{#select-picker content=multipleContent 88 | selection=multipleChoices 89 | action=(action "setMultipleChoices") 90 | multiple=true 91 | summaryMessage="Example content inside" 92 | optionLabelPath="content.label" 93 | optionValuePath="content.value"}} 94 |
Hello random user!
120 | {{/modal-dialog}} 121 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/searching.hbs: -------------------------------------------------------------------------------- 1 |Simple search attempts to match terms as full strings.
9 |For example the term def would match the words abcdef, defghi, or indefinitely.
Result: {{simpleSearchChoicesStr}}
11 |Advanced search finds terms through a fuzzy match. It looks for characters in the string that appear in order from left to right with any number of other character in between.
48 |For example the search term def would match abcdef or diversify.
Result: {{advancedSearchChoicesStr}}
50 |Result: {{listSearchChoicesStr}}
87 |