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.
In Simple word I want to show <select></select> which look like <input type="text">
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>
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>
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.
<input type="text">textbox and a collection of strings which i want to show like drop down list upon focusing on textbox thats it