自动完成——颜色输入建议文本答案

【问题标题】：Autocomplete -- Color Input Suggestion Text自动完成——颜色输入建议文本
【发布时间】：2015-10-19 08:10:56
【问题描述】：

我创建了Masked Armory，现在使用 Angular + Laravel 5 重建整个网站。

这是 Angular 方面的一次学习经历，我还需要一块来完成这个难题。

如果您查看当前的 Masked Armory 网站，请在“服务器名称”框中输入一些字母，您会看到这些字母在建议中突出显示。

如何在 Angular 指令中复制此功能？

当前用于自动完成的 Angular 指令：

function autoComplete ($timeout) {
    return function(scope, iElement, iAttrs) {
        iElement.autocomplete({
            source: scope[iAttrs.uiItems],
            select: function() {
                $timeout(function() {
                    iElement.trigger('input');
                }, 0);
            },
        });
    };
}

directivesModule.directive('autoComplete', autoComplete);

我在以前的网站版本中使用的功能是这样的：

var reEscape = new RegExp("(\\" + ["/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\\"].join("|\\") + ")", "g");
var fnFormatResult = function(value, data, currentValue) {
    var pattern = "(" + currentValue.replace(reEscape, "\\$1") + ")";
    return value.replace(new RegExp(pattern, "gi"), "<strong>$1</strong>");
};

可以在这里找到我之前网站上自动完成的整个 JS 细分：http://www.maskedarmory.com/js/js.includes.js

谢谢，如果您需要我提供任何进一步的信息，请告诉我！

【问题讨论】：

标签： javascript jquery angularjs autocomplete

【解决方案1】：

没关系。

我刚刚在 Angular UI Bootstrap Typeahead 中完成了所有工作。比 JQuery 自动完成好多了。

这里是它的链接：https://angular-ui.github.io/bootstrap/（搜索 Typeahead 以在页面上找到它）。

如果您正在使用 Angular 并尝试执行自动完成功能，请检查一下！

【讨论】：

【解决方案2】：

检查工作演示以获得简化的自动完成功能：JSFiddle。

angular.module('Joy', [])
    .directive('autoComplete', [function () {
    return {
        restrict: 'AE',
        scope: true,
        template:
            '<div>' +
            '<input type="text" ng-model="keyword" ng-change="showDropdown()">' +
            '<ul class="hit-list">' +
            '<li ng-repeat="hit in hits" ng-bind="hit">' +
            '</ul>' +
            '</div>',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.showDropdown = function () {
                $timeout(function () {
                    $scope.hits = ['Hit One', 'Hit Two', 'Hit Three'];
                }, 1000);
            };
        }]
    };
}]);

【讨论】：