javascript - open typeahead drop down by clicking down key first and then traverse the drop down -
i using bootstrap typeahead in angular project. requirement open typeahead drop downwards pressing downwards key when user have not entered text. have added functionality using this link. here demo.
now downwards key opens drop downwards , hence lose default behavior of traversing drop downwards (moving downwards next option).
index.html
<!doctype html> <html ng-app="plunker"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script> <script src="ui-bootstrap-tpls-0.10.0.js"></script> <script src="script.js"></script> </head> <body> <div class="container-fluid" ng-controller="typeaheadctrl"> <input type="text" ng-keydown="show($event)" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state state in states | filter:$viewvalue:statecomparator" class="form-control" /> <pre ng-show="opened">model: {{selected | json}}</pre> </div> </body> </html> script.js
(function () { var secretemptykey = '[$empty$]' angular.module('plunker', ['ui.bootstrap']) .directive('emptytypeahead', function () { homecoming { require: 'ngmodel', link: function (scope, element, attrs, modelctrl) { // parser run before typeahead's parser modelctrl.$parsers.unshift(function (inputvalue) { var value = (inputvalue ? inputvalue : secretemptykey); // replace empty string secretemptykey bypass typeahead-min-length check modelctrl.$viewvalue = value; // $viewvalue must match inputvalue pass typehead directive homecoming value; }); // parser run after typeahead's parser modelctrl.$parsers.push(function (inputvalue) { homecoming inputvalue === secretemptykey ? '' : inputvalue; // set secretemptykey empty string }); } } }) .controller('typeaheadctrl', function($scope, $http, $timeout) { $scope.selected = undefined; $scope.states = ['alabama', 'alaska', 'arizona', 'arkansas', 'california', 'colorado', 'connecticut', 'delaware', 'florida', 'georgia', 'hawaii', 'idaho', 'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana', 'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota', 'mississippi', 'missouri', 'montana', 'nebraska', 'nevada', 'new hampshire', 'new jersey', 'new mexico', 'new york', 'north dakota', 'north carolina', 'ohio', 'oklahoma', 'oregon', 'pennsylvania', 'rhode island', 'south carolina', 'south dakota', 'tennessee', 'texas', 'utah', 'vermont', 'virginia', 'washington', 'west virginia', 'wisconsin', 'wyoming']; $scope.statecomparator = function (state, viewvalue) { homecoming viewvalue === secretemptykey || (''+state).tolowercase().indexof((''+viewvalue).tolowercase()) > -1; }; $scope.show = function (e) { var keycode = e.keycode || e.which; if (keycode == 40) { //if it's downwards key $timeout(function () { $(e.target).triggerhandler('input'); }); } }; }); }()); is there way open drop downwards when clicking first time , move next alternative if clicked again?
finally, prepare issue putting if status when opening typeahead drop down.
$scope.show = function (e) { if($scope.selected === undefined){ var keycode = e.keycode || e.which; if (keycode == 40) { //if it's downwards key $timeout(function () { $(e.target).triggerhandler('input'); }); } } }; and giving undefined in $scope.selected if user have not selected item:
$scope.clearifempty = function () { if($scope.selected !== undefined && $scope.selected.length === 0){ $scope.selected = undefined; } } fix in action
javascript jquery css angularjs angular-ui-bootstrap
No comments:
Post a Comment