Feature/autocomplete input #228
Conversation
…h input, select item on hover
| var selectedEl = el.find('#' + selected.cid), | ||
| scrollContainerEl = el.find('.auto-complete-holder'); | ||
|
|
||
| if (selectedEl.length) { |
There was a problem hiding this comment.
selectedEl.length > 0, because selectedEl.length is too weak ( -1 is also true)
| var setInputPadding = function () { | ||
| $timeout(function () { | ||
| if (scope.getSelectedModelLabel()) { | ||
| el.find('input').css('padding-left', el.find('.selected-item').outerWidth(true) + 15); |
There was a problem hiding this comment.
why not using ng-style / ng-class instead of jquery?
There was a problem hiding this comment.
.find() and .css() are also methods provided by angulars jquery lite. And in this case of dynamic style calculation its easier than ng-style. ng-class would not work because of the dynamic width
There was a problem hiding this comment.
I dont get your point with .find() and .css() are also methods... yes, they are, i know. And that fact doesn't make it better.
The question should be: is there a better approach than using heavily jQuery. And one approach could be ng-style and ng-class.
I mean from the performance view you always run through the DOM searching your elements to apply a style. The question should be: Is it necessary, or is there a way to apply the style without the search
| ng-mousedown="select(model)"> | ||
| {{getLabel(model)}} | ||
| </li> | ||
| <li ng-show="viewModel.isSearching" style="display: flex;justify-content: center;"> |
| </div> | ||
| <div class="auto-complete-holder" | ||
| ng-show="(mwOptionsCollection.length>0 || viewModel.isSearching) && viewModel.searchActive" | ||
| style="max-height: 115px; overflow:scroll"> |
| @@ -0,0 +1,39 @@ | |||
| <div class="mw-autocomplete" | |||
| style="width: 100%"> | |||
| * </div> | ||
| * ``` | ||
| */ | ||
| .directive('mwAutocomplete', function ($q, $timeout, i18n) { |
There was a problem hiding this comment.
$q is not used, please remove the unnecessary injection
| break; | ||
| default: | ||
| /* All letters on keyboard */ | ||
| if (ev.keyCode >= 46) { |
There was a problem hiding this comment.
if (ev.keyCode >= 46 || ev.keyCode >= 8 || ev.keyCode >= 27) { ... }
And remove the cases:
case 8: //backspace
case 27: //escape
unsetResult();
break;
| }; | ||
|
|
||
| scope.getPlaceholder = function () { | ||
| if (scope.mwPlaceholder && !scope.getSelectedModelLabel()) { |
There was a problem hiding this comment.
return scope.mwPlaceholder && !scope.getSelectedModelLabel() ? scope.mwPlaceholder : '';
…quested during init
Fix #228 Provide input field that has autocomplete functionality.
The list is paginated and the search is handled by the filterable. On input the filter with the value is set and then the options collection is fetched. User can select an item via keyboard navigation or by clicking it.
It has the same programmatic interface as the
mwSelectBoxdirective