AngularJS预先选择模糊

时间:2014-08-06 06:53:03

标签: angularjs typeahead

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

我已经把我的意思放在一个例子

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

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

如果我输入&#39;两个&#39;并点击“&#39; two&#39;从下拉列表中我得到完整的对象{id:2,名称:&#39;两个&#39;}。这很好,但是如果我键入两个&#39;然后单击到下一个字段而不选择是否有办法在文本字段失去焦点时接受列表顶部?

3 个答案:

答案 0 :(得分:3)

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

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

你很可能只是查看你的先行指令的源代码,然后去除部分进行比较,然后选择数组中的第一项。

答案 1 :(得分:3)

不幸的是,底层组件不会为此情况发出任何事件。这将使解决方案更加复杂。但是,当输入值并且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);
    });

答案 2 :(得分:1)

我和EnigmaRM一起认为ngBlur似乎是做你想做的事的方式。但是,我同意其他人的看法,这对最终用户来说可能有点奇怪。我的实现如下(and in 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];
    }
  });
};