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

Posted 2023-03-05

【中文标题】自动完成——颜色输入建议文本

【英文标题】：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

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

【参考方案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);
            ;
        ]
    ;
]);