Question

I created Masked Armory and now rebuilding the entire site using Angular + Laravel 5.

It has been a learning experience on the Angular side and I need one more piece to complete the puzzle.

If you look on the current Masked Armory website, type in some letters in the 'Server Name' box and you will see those letters highlighted in the suggestions.

How do I replicate this feature in a Angular directive?

Current Angular Directive for AutoComplete:

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);

The function that I was using in my previous site version was this:

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>");
};

The entire JS breakdown for the autocomplete on my previous site can be found here: http://www.maskedarmory.com/js/js.includes.js

Thank you and please let me know if you need any further information from me!

Answer 1

Nevermind.

I just did the entire thing in Angular UI Bootstrap Typeahead. So much better than JQuery Autocomplete.

Here is the link to it: https://angular-ui.github.io/bootstrap/ (search for Typeahead to get down to it on the page).

Check it out if you are using Angular and trying to do an autocomplete feature!

Answer 2

Check working demo for a simplified autocomplete: 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);
            };
        }]
    };
}]);

Autocomplete -- Color Input Suggestion Text

2 个答案: