重新打开结果下拉我有问题在预输入以下用例:AngularJS [预输入]上的onfocus
问题:
- 用户开始输入,下拉打开并显示结果
- 用户点击在输入字段外(没有任何东西从输入字段中删除),下拉框关闭
- 用户再次回到输入字段(并且不会开始键入任何内容)并且什么都不会发生。 →期望的行为是:下拉菜单再次打开并显示与上次相同的结果列表(当然,只有在输入字段中有任何内容时才会发生)
- 当用户搜索任何内容并且如果发现结果并且发生焦点丢失并且字符串不会再被清除焦点没有任何事情发生,没有提示
- 当用户搜索任何东西,并且如果找不到结果并且发生焦点丢失字符串被清除并且还有没有找到数据的消息。
所以,这个故事的寓意是,在第一种情况下字符串,如果它不是从列表中选择,它是名单串子应该得到清除...
所以,也许typeahead-搜索焦点设置?
HTML:
<input type="text" focus-me="opened" ng-focus="onFocus($event)" ng-show="opened" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state for state in states | filter:$viewValue:stateComparator" class="form-control" />
JS:
(function() {
var secretEmptyKey = '[$empty$]'
angular.module('plunker', ['ui.bootstrap'])
.directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
})
.directive('emptyTypeahead', function() {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
// this parser run before typeahead's parser
modelCtrl.$parsers.unshift(function (inputValue) {
var value = (inputValue ? inputValue : secretEmptyKey); // replace empty string with secretEmptyKey to bypass typeahead-min-length check
modelCtrl.$viewValue = value; // this $viewValue must match the inputValue pass to typehead directive
return value;
});
// this parser run after typeahead's parser
modelCtrl.$parsers.push(function (inputValue) {
return inputValue === secretEmptyKey ? '' : inputValue; // set the secretEmptyKey back to empty string
});
}
}
})
.controller('TypeaheadCtrl', function($scope, $http, $timeout) {
$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Wyoming'];
$scope.opened = true;
$scope.stateComparator = function (state, viewValue) {
return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1;
};
$scope.onFocus = function (e) {
$timeout(function() {
$(e.target).trigger('input');
$(e.target).trigger('change'); // for IE
});
};
});
}());
我有这个Plunker展示我的代码看起来像。
还有GitHub Issue。