AngularJS Autocomplete Widget

Question

AngularJS Autocomplete Widget

Currently, I have implemented a popup in angularjs along with a form. To enhance user experience, I have integrated an auto-completer feature using the following directive:

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

The functionality is working as expected, however, there is an issue where the autocomplete box appears behind the popup. Does anyone have any suggestions on how to resolve this?

javascript angularjs

Answer 1

Answer №1

Give this a try

Check out the live demo

Your HTML code

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

Javascript code

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

Answer 2

Give this a try

Check out the live demo

Your HTML code

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

Javascript code

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

Answer 3

Answer №2

If you are in need of a similar solution using only Angular, the following is an illustration of a pure angular auto-complete feature.

JS:

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean".];
    $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>

To see this implementation in action, feel free to check out the fiddle here

Answer 4

If you are in need of a similar solution using only Angular, the following is an illustration of a pure angular auto-complete feature.

JS:

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean".];
    $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>

To see this implementation in action, feel free to check out the fiddle here

Answer 5

Answer №3

Use the following code for autocomplete functionality:

<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()" />

Your jQuery Code:

//Function to Trigger 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 = [];
}
//======================================
//End of User Autocomplete Functionality

Answer 6

Use the following code for autocomplete functionality:

<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()" />

Your jQuery Code:

//Function to Trigger 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 = [];
}
//======================================
//End of User Autocomplete Functionality

AngularJS Autocomplete Widget

Answer №1

Answer №2

Answer №3

Similar questions

Show a distinct cursor when hovering over text (excluding the element)

Analyzing string values in Cypress

JavaScript validation for checkboxes

Angular's observable function is not providing a complete response

Having trouble exporting a static HTML file using Next.js

Execute Code After Function Completion OR DIV Shows Up

Generate a unique splatter design using Cascading Style Sheets

Establish Angular data for all fields in the form

Place the elements for the children prior to the text within

Issue encountered: Component returning nothing error in a Next.js/React application

What steps can be taken to address TypeScript error TS2339: Property 'XXX' is not present on type 'IntrinsicAttributes & ...?

Transferring information within React components

Utilize angularjs daterangepicker to refine and sift through data

Utilizing async parallel for executing multiple queries

AngularJS does not hide the Onsen UI modal

Creating websites with Single-page applications by assembling HTML and JS fragments at build-time

What could be the reason the forEachRow function is not impacting the second or subsequent pages within the dhtmlx grid?

Ways to display an SVG spinner prior to a substantial UI refresh

Is there a way to effortlessly launch a new window with just a single click?

The process of informing users via email after permission has been granted