为什么自动完成输入没有正确更新模型？答案

【问题标题】：Why is an Autocomplete input not updating the model correctly?为什么自动完成输入没有正确更新模型？
【发布时间】：2018-04-22 13:43:39
【问题描述】：

我正在使用以下依赖项：

angularJS v1.5.5
jquery v1.12.4
jquery-ui v1.12.1
jQuery Autocomplete plugin v1.2.6

然后我像这样定义指令：

.directive('autoComplete', [
    '$timeout', function($timeout) {
        return function(scope, element, attrs) {
            var auto;
            auto = function() {
                $timeout((function() {
                    if (!scope[attrs.uiItems]) {
                        auto();
                    } else {
                        element.autocomplete({
                            source: [scope[attrs.uiItems]]
                        });
                    }
                }), 0);
            };
            return auto();
        };
    }
])

我从this SO question 的答案中借来的。自动完成功能在大多数情况下都有效，但是当我使用键盘在匹配项上移动并按回车键或用鼠标单击匹配项时，模型仅更新为我键入的部分，而不是选择的完整项目。我应该在哪里解决这个问题？它是插件中的错误吗？指示？我的输入定义？

$scope.ccyPairs = [ "USDCHF", "CHFUSD", "USDEUR", "EURUSD", "USDGBP", "GBPUSD", "USDJPY", "JPYUSD", "CHFEUR", "EURCHF", "CHFGBP", "GBPCHF", "CHFJPY", "JPYCHF", "EURGBP", "GBPEUR", "EURJPY", "JPYEUR", "GBPJPY", "JPYGBP" ];

<input type="text" auto-complete id="ccyPair" ui-items="ccyPairs" ng-model="ccyPair" />

当我这样做时：

$scope.$watch("ccyPair", function(newValue, oldValue) {
   console.log(newValue);
}, false);

我看到模型仅使用我在输入中键入的部分进行更新，而不是使用列表中的完整选定匹配项进行更新，要么通过鼠标单击选择它，要么在匹配项之间移动并按 Enter。

例如，在下图中，模型仅更新为USD，而不是正确的完全匹配CHFUSD。

【问题讨论】：

您是否考虑过使用角度自动完成指令？我已经记不清有多少帖子要求帮助使用 Angular 中基于 jquery 的组件了。我认为油和水。
:D 好点……这个角度自动完成指令在哪里？我用谷歌搜索了它，我只找到了 jquery 插件：D
我自己没用过，但是 ng-autocomplete 看起来下载量很大。 npmjs.com/package/ng-autocomplete
我再次发现许多自定义 ng-autocomplete 但哪一个是“官方的”？
不确定您所说的“官方”是什么意思，但一般来说，Angular 没有“官方”的组件集，因为它只是一个 javascript 框架。通常在 Angular 开发中，你会选择一个基于 Angular 的 ui 组件库，也可能是一些 CSS 库，比如 Bootstrap。我是 Bootstrap 的忠实粉丝，所以我喜欢 UI Bootstrap 指令库 (angular-ui.github.io/bootstrap)。 Angular Material 是另一种流行的材料，但我没有使用它的经验。

标签： javascript jquery angularjs autocomplete

【解决方案1】：

好吧，在经历了很多痛苦之后，我爬进了一个可行的解决方案:)

.directive('autoComplete', [
    '$timeout', function($timeout) {
        return {
          require: 'ngModel',
          link: function($scope, element, attrs, ctrl) {
                    var fAutoComplete;
                    fAutoComplete = function() {
                        $timeout(function() {
                            if (!$scope[attrs.uiItems]) {
                                fAutoComplete();
                            } else {
                                element.autocomplete({
                                    source: [$scope[attrs.uiItems]]
                                }).on('selected.xdsoft', function(e, newValue) {
                                    ctrl.$setViewValue(newValue);
                                    $scope.$apply();
                                });
                            }
                        }, 5);
                    };
                    return fAutoComplete();
                }
        };
    }
])

【讨论】：