开放式AngularUI Bootstrap Typeahead通过控制器匹配结果

问题描述

反正是否有触发从控制器在预输入文本框中打开匹配结果的提示?

Is there anyway to trigger opening the match results on a typeahead input text box from the controller?

用例:

• 用户转到 https://example.com/search/searchText
• 页面控制器在初始化时将输入文本设置为"searchText"(ng-model)
• 触发显示来自控制器的提前输入结果

显然，在输入文本框中键入内容时，我似乎只能得到预输入结果.

I can only seem to get the typeahead results, obviously, while typing in the input text box.

推荐答案

我以几种方式使它工作，但是两者都需要对ui-bootstrap进行更改.我想我可以创建一个拉取请求，但不确定我的特定用例是否是常见的用例.

I got it to work in a couple ways, but both require changes to ui-bootstrap. I suppose I could create a pull request but not sure if my particular use case is a common one.

1)自定义指令，并在输入元素的焦点上调用UibTypeaheadController.scheduleSearchWithTimeout方法.

1) Custom directive and calling UibTypeaheadController.scheduleSearchWithTimeout method on focus of input element.

指令:

.directive("showSearchResultsOnFocus", function($stateParams) {
return {
    require: ['uibTypeahead', 'ngModel'],
    link: function (scope, element, attr, ctrls) {
        var typeaheadCtrl = ctrls[0];
        var modelCtrl = ctrls[1];

        element.bind('focus', function () {
            if (!$stateParams.search || !modelCtrl.$viewValue) return;
            typeaheadCtrl.exportScheduleSearchWithTimeout(modelCtrl.$viewValue);
        });
    }
}

更新到ui-bootstrap:

Update to ui-bootstrap:

this.exportScheduleSearchWithTimeout = function(inputValue) {
  return scheduleSearchWithTimeout(inputValue);
};

错误:需要将该方法在控制器上公开. init方法是唯一可用的方法，并且范围是隔离的.并不是要从外部控制器打来的电话.

Bad: Requires making the method public on controller. Only method available is the init method and scope is isolated. Not meant to call from outside controller.

2)添加新的typeahead属性以允许设置默认值并集中显示结果:

2) Add new typeahead attribute to allow setting default value and show results on focus:

更新到ui-bootstrap:

Update to ui-bootstrap:

var isAllowedDefaultOnFocus = originalScope.$eval(attrs.typeaheadAllowDefaultOnFocus) !== false;
originalScope.$watch(attrs.typeaheadAllowedDefaultOnFocus, function (newVal) {
  isAllowedDefaultOnFocus = newVal !== false;
});

element.bind('focus', function (evt) {
  hasFocus = true;
  // this was line before: if (minLength === 0 && !modelCtrl.$viewValue) {
  if ((minLength === 0 && !modelCtrl.$viewValue) || isAllowedDefaultOnFocus) {
    $timeout(function() {
      getMatchesAsync(modelCtrl.$viewValue, evt);
    }, 0);
  }
});

错误:将请求拉至ui-bootstrap，但可能不会更改为常用功能.在此处提交了PR: https://github.com/angular-ui/bootstrap/pull/6353 不确定是否会合并，但请在此之前使用fork.

Bad: Pull Request to ui-bootstrap but change perhaps not a common use feature. Submitted a PR here: https://github.com/angular-ui/bootstrap/pull/6353 Not sure if will be merged or not but using fork until then.

还有其他建议吗?

版本角度:1.5.8，UIBS:2.2.0，引导程序:3.3.7

VersionsAngular: 1.5.8, UIBS: 2.2.0, Bootstrap: 3.3.7

这篇关于开放式AngularUI Bootstrap Typeahead通过控制器匹配结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！