AngularJS [typeahead]重新打开onFocus上的结果下拉列表

Question

我在预先：

中遇到以下用例时遇到问题

问题：

• 用户开始输入，下拉列表打开并显示结果
• 用户点击输入字段（没有从输入字段中删除任何内容），下拉关闭
• 用户点击返回到预先输入字段（并且不会开始输入任何内容）并且没有任何反应。 →所需的行为是：下拉列表再次打开并显示与上次相同的结果列表（当然，只有在输入字段中有任何内容时才会出现）
• 当用户搜索任何内容并且发现结果并且焦点丢失并且字符串未被清除时，焦点没有任何反应，没有提示
• 当用户搜索任何内容并且如果找不到结果并且焦点丢失时，字符串会被清除，并且还会显示没有找到数据的消息。

所以，故事的道德是，在第一种情况下，如果未从列表中选择字符串并且它是列表字符串的子字符串，则应该清除字符串...

那么，也许是一种类型搜索 - 焦点搜索设置？

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。

Answer 1

您需要检查列表中是否存在输入值的模糊。 为此，请执行以下操作：

在输入

中添加属性ng-blur="onBlur($event)"

在控制器中定义以下方法：

$scope.onBlur = function (e) {
    $timeout(function () {
    var val = $(e.target).val();
    if(val && $scope.states.indexOf(val) == -1) {
      $(e.target).val("")
    }
  });
};

Answer 2

Hello Everyone，

经过一番努力，我得到了正确的解决方案......

有一些指令可用于解决方案，

在typeaheadFocus指令中添加以上条件，

    if ((e.type == "focus" && viewValue != ' ') && (e.type == "focus" && viewValue != '')){
        return;
    }

在typeaheadFocus指令和typeaheadOnDownArrow指令中添加以下功能

    //compare function that treats the empty space as a match
    scope.$emptyOrView = function(actual) {
        if(ngModel.$viewValue.trim()) {
            return actual ? actual.value.toString().toLowerCase().indexOf(ngModel.$viewValue.toLowerCase()) > -1 : false;
        }
        return true;
    };            

在ui-bootstrap.js中更改此条件，

  if (inputFormatter) {
     locals.$model = modelValue;
     if(modelValue){
     locals.$label = view_value;
  } else {
     locals.$label = '';
  }

在ui-bootstrap js中添加以下event

element.bind('blur', function(evt) {
   hasFocus = false;
   if (!isEditable && modelCtrl.$error.editable) {
      element.val('');
      modelCtrl.$viewValue = ' ';
   }
   if(!isEditable && scope.no_data_found) {
         //ngModel.$viewValue = '';
         modelCtrl.$viewValue = ' ';
         scope.no_data_found = false;
         popUpEl.find('.typeaheadNoData').remove();
         resetMatches();
         scope.$digest();
         element.val("");
   }
});

在ui-bootstrap.js中添加

        // I listen for emptyTypeAhead events from the parent scope chain.
    originalScope.$on(
        "emptyTypeAhead",
        function handlePingEvent( event, newVal1) {
            var scope = originalScope.$new();
            modelCtrl.$setViewValue(newVal1);
            return newVal1;
        }
    );

在所有指令中使用ui-bootstrap.js添加上述函数

.directive('shouldFocus', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.shouldFocus, function(newVal, oldVal) {
                var isActive = scope.$eval(attrs.shouldFocus);
                if(isActive) {
                    var ele = element[0];
                    var parent = ele.parentNode

                    if(ele.offsetTop + ele.offsetHeight > parent.offsetHeight + parent.scrollTop){
                        parent.scrollTop = ele.offsetTop;
                    } else if(parent.scrollTop > ele.offsetTop) {
                        parent.scrollTop = ele.offsetTop;
                    }
                }
            });
        }
    }
});

实施例

<input type="text" ng-model="inquiry.account" 
 placeholder="Select Account" 
 typeahead="account.id as account.text for account in account_typeahead_json" 
 typeahead-input-formatter="formatModel($model,$label)" 
 typeahead-editable="false" typeahead-on-down-arrow typeahead-focus />

希望这个答案对你有所帮助。

Here我添加了ui-bootstrap.js