CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
user3800108
user3800108

Reputation: 1248

Angular :: Making Input Text to open up dropdown list upon focus

How can i make <input type="text"> to show drop down probably like it happens in auto complete extenders but without typing i mean as soon as i focus on text input box it should show a list like dropdown.

I Wish

In Simple word I want to show <select></select> which look like <input type="text">

Upvotes: 2

Views: 7723

Answers (3)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

Below code works fine. Note I've added a filter too so that it filter outs the matching color as you type in the text box. Please put desired css, too lazy to do that. :-P 

<!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('dropDownController', function($scope){
        $scope.items = ["orange", "white", "purple", "red", "green"];
        $scope.showDropdown = function(){
         $scope.dropDown = true;
       };

    $scope.hideDropdown = function(){
         $scope.dropDown = false;
       };


    });
    </script>
    </head>
    <body ng-controller="dropDownController">

        <input type="text" ng-focus="showDropdown()" ng-blur="hideDropdown()" ng-model="color">

        <div ng-show="dropDown" style="border: 1px solid black;">
        <ul ng-repeat= "item in items |filter: color">
        <li>{{item}}</li>
        </ul>
        </div>





    </body>
    </html>

Upvotes: 2

dfsq
dfsq

Reputation: 193261

The best you can do is to write simple reusable directive. Here is a quick basic implementation:

app.directive('inputDropdown', function($compile) {

    var template = 
        '<input ng-model="ngModel">' +
        '<div class="dropdown">' + 
            '<div ng-repeat="value in list">' +
                '<div ng-mousedown="select($event, value)">{{value}}</div>' + 
            '</div>' +
        '</div>';

    return {
        restrict: 'EA',
        scope: {
            ngModel: '=',
            list: '=',
            onSelect: '&'
        },
        template: template,
        link: function(scope, element, attrs) {
            element.addClass('input-dropdown');
            scope.select = function(e, value) {
                scope.ngModel = value;
                scope.onSelect({$event: e, value: value});
            };
        }
    };
});

Show/hide behaviour would be controlled by CSS :focus pseudo-class:

.input-dropdown {
    position: relative;
    display: inline-block;
}
.input-dropdown .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 2px;
    background: #EEE;
}
.input-dropdown .dropdown div {
    cursor: pointer;
    padding: 2px 5px;
}
.input-dropdown input:focus + .dropdown {
    display: block;
}

And here is a usage:

<input-dropdown ng-model="preference" list="values" on-select="pick(value)"></input-dropdown>

Demo: http://plnkr.co/edit/v1o3fH2vfU9acBSagVZI?p=preview

Upvotes: 2

Luca
Luca

Reputation: 9715

you could use ng-focuson your input to toggle the value of a variable that controls ng-show (or ng-hide) on the dropdown-like elements

<input type="text" ng-focus="toggleDropDown(...)">

<div ng-show="dropDown">

toggleDropDown() method and dropDown variable are defined in your controller - the implementation is really up to you.

Upvotes: 1

Related Questions