仅当显式选择行时才关闭 ui-bootstrap typeahead [英] Tab-off ui-bootstrap typeahead only when row is explicitly selected

问题描述

我创建了这个 jsBin 来演示我遇到的问题.如果你去这里，试着输入五"然后继续.你的自然反应是输入五"然后按 Tab，如果你想要五百"，你就向下箭头一次；但是，在这种情况下，您必须输入五"，然后按退出键或物理鼠标开箱即用，而不单击任何其他选项

因此，基本上，当您使用预先输入时，如果您的当前条件至少有一个匹配结果，则按 Tab 键将选择它.我的预期行为是，当您键入时，当前选择的选项正是您键入的内容，如果您想要其他结果之一，则必须向下箭头一次或多次.

这是jsBin中的代码:

<div>{{选择}}
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue">

还有 JavaScript:

var app = angular.module('app', ['ui.bootstrap']).controller('TestController', function($scope) {$scope.typeaheadOptions = [一"、二"、三"、四"、五百"、十五"、十四"、五十"、六"、七"、八"、九"、'十']});

解决方案

我最终修改了 ui-bootstrap 使其按照我想要的方式工作.

我在指令中添加了一个 mustMouseDownToMatch 属性/属性，例如:

还有 javascript:

var mustMouseDownToMatch = originalScope.$eval(attrs.typeaheadMouseDownToMatch) ?originalScope.$eval(attrs.typeaheadMouseDownToMatch) : false;

我还添加了这个函数，它将当前文本放入预先输入列表的第一项，并使其成为选定项:

var setFirstResultToViewValue = function (inputValue) {scope.matches.splice(0, 0, {编号:0，标签:输入值，模型:输入值});//将选中的项设置为列表中的第一项，也就是这个家伙范围.activeIdx = 0;}

这在 typeahead 指令中的 getMatchesAsync 调用中调用:

var getMatchesAsync = function(inputValue) {//做东西$q.when(parserResult.source(originalScope, locals)).then(function(matches) {//做东西如果 (matches.length > 0) {//做东西}如果(mustMouseDownToMatch){setFirstResultToViewValue(inputValue);}//做东西};

I've created this jsBin to demonstrate the issue I'm having. If you go here, try type "Five" and move on. Your natural reaction would be to type "Five" and then press tab, and if you wanted "Five-Hundred," you'd arrow-down once; however, in this case, you have to type "Five" and then either press escape or physically mouse out of the box without clicking any of the other options

So, basically, when you're using typeahead, if there is at least one matching result for your current criteria, pressing tab will select it. My expected behavior is that as you type, the current selected option is exactly what you're typing, and if you want one of the other results you must down-arrow one or more times.

Here is the code that's in the jsBin:

<div ng-controller="TestController">
  <div>
    {{selected}}
  </div>
  <input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue">
</div>

And the JavaScript:

var app = angular.module('app', ['ui.bootstrap'])

.controller('TestController', function($scope) {
  $scope.typeaheadOptions = [
    'One','Two','Three','Four','Five-Hundred','Fifteen','Fourteen','Fifty','Six','Seven','Eight','Nine','Ten'
  ]
});

解决方案

I ended up modifying ui-bootstrap to work how I want it to.

I added a mustMouseDownToMatch property/attribute to the directive, like:

<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-mouse-down-to-match="true">

And the javascript:

var mustMouseDownToMatch = originalScope.$eval(attrs.typeaheadMouseDownToMatch) ? originalScope.$eval(attrs.typeaheadMouseDownToMatch) : false;

I also added this function which will put the current text into the first item of the typeahead list, and make it the selected item:

var setFirstResultToViewValue = function (inputValue) {
    scope.matches.splice(0, 0, {
        id: 0,
        label: inputValue,
        model: inputValue
    });

    // set the selected item to the first item in the list, which is this guy
    scope.activeIdx = 0;
}

And that is called in the getMatchesAsync call in the typeahead directive:

var getMatchesAsync = function(inputValue) {
// do stuff
    $q.when(parserResult.source(originalScope, locals)).then(function(matches) {
        // do stuff
        if (matches.length > 0) {
             // do stuff
        }
        if (mustMouseDownToMatch) {
            setFirstResultToViewValue(inputValue);
        }
        // do stuff
  };

这篇关于仅当显式选择行时才关闭 ui-bootstrap typeahead的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！