[Autocomplete] Clicking the arrow will display the entire list of timezones

This change is based on the  following code review:
- Display the entire list of timezones, regardless of what's currently entered.
- As soon as the user typed (or deleted chars in the input) then that filtration would take over the list display
This commit is contained in:
Dhrubomoy Das Gupta
2017-06-06 18:55:16 -04:00
parent 98cc19c637
commit 3870266131
4 changed files with 26 additions and 12 deletions

View File

@@ -308,6 +308,7 @@ textarea.lg { position: relative; height: 300px; }
top: 8px; top: 8px;
left: 210px; left: 210px;
font-size: 10px; font-size: 10px;
cursor: pointer;
} }
.autocompleteOptions { .autocompleteOptions {
border: 1px solid $colorFormLines; border: 1px solid $colorFormLines;

View File

@@ -152,7 +152,8 @@ define([
"key": "AutocompleteController", "key": "AutocompleteController",
"implementation": AutocompleteController, "implementation": AutocompleteController,
"depends": [ "depends": [
"$scope" "$scope",
"$element"
] ]
}, },
{ {

View File

@@ -21,13 +21,15 @@
--> -->
<div ng-controller="AutocompleteController" <div ng-controller="AutocompleteController"
class='form-control autocomplete' > class='form-control autocomplete'>
<input type="text" <input class="autocompleteInput"
type="text"
ng-model="ngModel[field]" ng-model="ngModel[field]"
ng-change="filterOptions(ngModel[field])" ng-change="filterOptions(ngModel[field])"
ng-click="inputClicked($event)" ng-click="inputClicked($event)"
ng-keydown="keyDown($event)"/> ng-keydown="keyDown($event)"/>
<span class="icon-arrow-down"></span> <span class="icon-arrow-down"
ng-click="arrowClicked()"></span>
<div class="autocompleteOptions" <div class="autocompleteOptions"
onload="hideOptions = false" onload="hideOptions = false"
ng-hide="hideOptions" ng-hide="hideOptions"

View File

@@ -30,7 +30,7 @@ define(
* @memberof platform/forms * @memberof platform/forms
* @constructor * @constructor
*/ */
function AutocompleteController($scope) { function AutocompleteController($scope, $element) {
var key = { var key = {
down: 40, down: 40,
@@ -73,6 +73,12 @@ define(
} }
} }
function showOptions(string) {
$scope.hideOptions = false;
$scope.filterOptions(string);
$scope.optionIndex = 0;
}
$scope.keyDown = function($event) { $scope.keyDown = function($event) {
if($scope.filteredOptions) { if($scope.filteredOptions) {
var keyCode = $event.keyCode; var keyCode = $event.keyCode;
@@ -109,9 +115,13 @@ define(
$scope.inputClicked = function($event) { $scope.inputClicked = function($event) {
var target = $event.target; var target = $event.target;
target.select(); target.select();
$scope.hideOptions = false; showOptions(target.value);
$scope.filterOptions(target.value); }
$scope.optionIndex = 0;
$scope.arrowClicked = function() {
var autocompleteInputElement = $element[0].getElementsByClassName('autocompleteInput')[0];
autocompleteInputElement.select();
showOptions('');
} }
$scope.fillInput = function(string) { $scope.fillInput = function(string) {