[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:
@@ -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;
|
||||||
|
|||||||
@@ -152,7 +152,8 @@ define([
|
|||||||
"key": "AutocompleteController",
|
"key": "AutocompleteController",
|
||||||
"implementation": AutocompleteController,
|
"implementation": AutocompleteController,
|
||||||
"depends": [
|
"depends": [
|
||||||
"$scope"
|
"$scope",
|
||||||
|
"$element"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -30,13 +30,13 @@ define(
|
|||||||
* @memberof platform/forms
|
* @memberof platform/forms
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
function AutocompleteController($scope) {
|
function AutocompleteController($scope, $element) {
|
||||||
|
|
||||||
var key = {
|
var key = {
|
||||||
down: 40,
|
down: 40,
|
||||||
up: 38,
|
up: 38,
|
||||||
enter: 13
|
enter: 13
|
||||||
}
|
}
|
||||||
|
|
||||||
if($scope.options[0].name) {
|
if($scope.options[0].name) {
|
||||||
// If "options" include name, value pair
|
// If "options" include name, value pair
|
||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user