AngularJS预先选择模糊

Question

我在我的AngularJS项目中使用了typeahead，如果我输入完整值并单击该字段，我想让它选择条目。

我举了一个我的意思的例子

http://plnkr.co/edit/NI4DZSXofZWdQvz0Y0z0?p=preview

<input class='typeahead' type="text" sf-typeahead options="exampleOptions" datasets="numbersDataset" ng-model="selectedNumber">

如果我输入'two'并从下拉列表中点击'two'，我会得到完整的对象{id：2，name：'two'}。 这很好，但是如果我键入'two'并单击到下一个字段而没有选择是否有一种方法可以在文本字段失去焦点时接受列表顶部？

Answer 1

我不确定我是否想在我的应用程序中使用这种功能。 用户实际上没有选择任何东西。 因此，为他们选择一些东西会引起挫折。

但我确实理解通常需要奇怪的要求。 在这种情况下，我会使用ngBlur攻击它。 指定要在模糊时调用的函数。 您可以获取ng-model的内容，然后遍历您的数据（假设静态而不是通过服务器发送）以找到匹配项。

您很可能只是查看typeahead指令的源代码并去除部分进行比较，然后选择数组中的第一个项目。

Answer 2

不幸的是，底层组件不会为此情况发出任何事件。 这将使解决方案更加复杂。 但是，当输入值并且Typehead魔法发生时，您可以补充这些事件并捕获它们以更新您的ngModel。

我已经创建了一个基于你的plnkr的plnkr，虽然还没有清理，但它是一个工作的plnkr到目前为止你需要的东西。

其中的要点是遵循代码，但您可以将此代码放在最适合的地方
解释如下：

          //Crux - this gets you the Typeahead object 
          var typeahead = element.data('ttTypeahead');              

          //This gets you the first
          var datum = typeahead.dropdown.getDatumForTopSuggestion();

          if (datum){
            //you can do lot of things here however 
            //..I tried to - fill in the functionality best suited to be provided by Typeahead
            //for your use case. In future if Typeahead gets this 
            //..feature you could remove this code
            typeahead.eventBus.trigger("hasselections", datum.raw, datum.datasetName);
          } 

在上面的代码中，您还可以将范围中的数据保存在以后随意执行的任何操作中。 这基本上是你的对象{num: 'Six'}然后你也可以使用ngBlur将它设置在某个地方（但是我创建的脚趾鼻涕需要这些噱头。）

然后再向下 - ngModel的值设置如下

   element.bind('typeahead:hasselections', function(object, suggestion, dataset) {
      $timeout(function(){
        ngModel.$setViewValue(suggestion);
      }, 1);
      //scope.$emit('typeahead:hasselections', suggestion, dataset);
    });

Answer 3

我和EnigmaRM在一起，因为ngBlur似乎是你想要的方式。 但是，我同意其他人的看法，这对最终用户来说可能有点奇怪。 我的实现在下面（ 并在plnkr中 ）。 请注意，我在ngBlur上触发，但仅当且仅当Bloodhound中只有一个匹配并且匹配完全匹配时才应用模型。 我认为这可能是两个世界中最好的，并希望它应该给你足够的继续。

$scope.validateValue = function() {
  typedValue = $scope.selectedNumber;
  if(typedValue.num !== undefined && typedValue.num !== null)
  {
    return;
  }
  numbers.get(typedValue, function(suggestions) {
    if(suggestions.length == 1 && suggestions[0].num === typedValue) {
      $scope.selectedNumber = suggestions[0];
    }
  });
};