自动完成-颜色输入建议文字

Question

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

这是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

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

Answer 1

没关系。

我只是在Angular UI Bootstrap Typeahead中完成了整个工作。 比JQuery Autocomplete好得多。

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

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

Answer 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);
            };
        }]
    };
}]);