Angularjs autocomplete

Question

I am using a popup in angularjs with a form.I am using a auto-completer as-

portfolio.directive('auto', function($timeout) {
    var names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];

    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: names,
                onSelect: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    }
    };
});

it is working but the autocomplete box opens behind the popup. can any one suggest the solution?

can anyone suggest how to add z-index value to the autocomplete box opens on selecting...? — Ravindra Jha
– Ravindra Jha, Commented May 16, 2014 at 5:42

Nidhish Krishnan · Accepted Answer · 2014-05-16 05:16:43Z

4

Try this out

Working Demo

Html

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto  ng-model="selected">
        selected = {{selected}}
    </div>
</div>

script

function DefaultCtrl($scope) {

}

angular.module('MyModule', []).directive('auto', function($timeout) {
    var names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];

    return {
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: names,
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    }
    };
});

answered May 16, 2014 at 5:16

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ravindra Jha Over a year ago

i tried this one that is fine, but tell how to increase the z-index value for the autocomplete popup list

Krunal Modi · Accepted Answer · 2016-04-11 09:57:52Z

2

If you require the same with only Angular, then below is an example with pure angular auto-complete.

JS:

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
    $scope.showlist = false;
    $scope.clearList = function(){
        $scope.selected = null;
      $scope.showlist = false;
    }

    $scope.selectedItem = function($event, name){
        $scope.selected = name;
      $scope.showlist = false;
    }
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.bind("keypress", function(e){
                    scope.showlist = true;
            })
    };
})

HTML:

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        <button ng-click="clearList()">Clear
        </button>
        <ul ng-show="showlist">
            <li ng-repeat="name in names | filter: selected" ng-click="selectedItem($event, name)">
              {{name}}
            </li>
        </ul>
    </div>
</div>

You can check fiddle here

answered Apr 11, 2016 at 9:57

Krunal Modi

7477 silver badges16 bronze badges

1 Comment

maktel Over a year ago

I had trouble running the fiddle from the answer, so here is a working version with correctly imported dependencies: jsfiddle.net/u8fxn9a6

Michael Gaskill · Accepted Answer · 2016-06-22 15:51:57Z

Use this code to autocomplete:

<div>
  <input type="text" placeholder="Search for UserName" class="form-control" ng-keydown="checkKeyDown($event)" ng-keyup="checkKeyUp($event)"

ng-model="Filters.UserId" ng-change="search()" /> {{suggestion}}

Your jQuery Code:

//Function To Call On ng-change
$scope.search = function () {
    $scope.searchItems = $rootScope.users;

    //Sort Array       
    $scope.searchItems.sort();
    //Define Suggestions List
    $scope.suggestions = [];
    //Define Selected Suggestion Item
    $scope.selectedIndex = -1;
    $scope.suggestions = [];
    var myMaxSuggestionListLength = 0;
    for (var i = 0; i < $scope.searchItems.length; i++) {
        var searchItemsSmallLetters = angular.lowercase($scope.searchItems[i].UserID);
        var searchTextSmallLetters = angular.lowercase($scope.Filters.UserId);
        if (searchItemsSmallLetters.indexOf(searchTextSmallLetters) !== -1) {
            $scope.suggestions.push(searchItemsSmallLetters);
            myMaxSuggestionListLength += 1;
            if (myMaxSuggestionListLength == 10) {
                break;
            }
        }
    }
}

//Keep Track Of Search Text Value During The Selection From The Suggestions List  
$scope.$watch('selectedIndex', function (val) {
    if (val !== -1 && val != undefined) {
        $scope.Filters.UserId = $scope.suggestions[$scope.selectedIndex];
    }
});

//Text Field Events
//Function To Call on ng-keydown
$scope.checkKeyDown = function (event) {
    if (event.keyCode === 40) {//down key, increment selectedIndex
        event.preventDefault();
        if ($scope.selectedIndex + 1 !== $scope.suggestions.length) {
            $scope.selectedIndex++;
        }
    } else if (event.keyCode === 38) { //up key, decrement selectedIndex
        event.preventDefault();
        if ($scope.selectedIndex - 1 !== -1) {
            $scope.selectedIndex--;
        }
    } else if (event.keyCode === 13) { //enter key, empty suggestions array
        event.preventDefault();
        $scope.suggestions = [];
    }
}

//Function To Call on ng-keyup
$scope.checkKeyUp = function (event) {
    if (event.keyCode !== 8 || event.keyCode !== 46) {//delete or backspace
        if ($scope.Filters.UserId == "") {
            $scope.suggestions = [];
        }
    }
}
//======================================

//List Item Events
//Function To Call on ng-click
$scope.AssignValueAndHide = function (index) {
    $scope.Filters.UserId = $scope.suggestions[index];
    $scope.suggestions = [];
}
//======================================
//User Autocomplete end

Collectives™ on Stack Overflow

Angularjs autocomplete

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related