7
重新打開結果下拉我有問題在預輸入以下用例：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。