javascript - angular auto-suggestion text typeahead and html ul li dropdown -
i creating auto-complete dropdown control using ul li.
drop down come out when user click control.
user can select item want.
program can print out selected key , value.
working fine 1 problem.
i want display auto-suggestion list when user type control.
so use typeahead not work , not popout when user typing.
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style type="text/css"> .dropdown-menu { width: 230px; } .dropdown-menu li { word-wrap: break-word; white-space: normal; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.0.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script> <script> angular.module('myapp', []) .controller('myctrl', function($scope, $http) { $scope.ddlprojectcategorydefaultmessage = ""; $scope.selectedkey = ""; $scope.selectedvalue = ""; $scope.projectcategorylist = [ { key: 'a001', value: 'implementation project', }, { key: 'a002', value: 'identification project', }, { key: 'b001', value: 'national electrification project' }, { key: 'c001', value: 'agricultural development support project' } ]; $scope.ddlprojectcategory_selectedchange = function(key, value){ $scope.selectedkey = key; $scope.selectedvalue = value; $scope.ddlprojectcategorydefaultmessage = value; } $scope.ddlprojectcategory_keychange = function(){ console.log("change value = ", $scope.ddlprojectcategorydefaultmessage); } }); </script> </head> <body ng-app="myapp" ng-controller="myctrl"> <div class="container"> <div class="panel-group"> <div class="panel panel-primary"> <div class="panel-heading">dropdown testing</div> <div class="panel-body"> <div class="row"> <div class="col-md-3"><span class="text-muted">control</span></div> <div class="col-md-2"><span class="text-muted">key</span></div> <div class="col-md-2"><span class="text-muted">value</span></div> </div> <div class="row"> <div class="col-md-3"> <!-- dropdown control start --> <div class="input-append btn-group"> <input type="text" id="ddlprojectcategory" placeholder="-- select project --" ng-model="ddlprojectcategorydefaultmessage" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="form-control" style="text-align:left;width:230px;" ng-change="ddlprojectcategory_keychange();" typeahead="projectcategory projectcategory in projectcategorylist | filter:$viewvalue | limitto:8" /> <span class="caret" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="position:absolute;left:90%;top:45%;"></span> <ul class="dropdown-menu" aria-labelledby="ddlprojectcategory"> <li ng-repeat="projectcategory in projectcategorylist"> <a href="#" ng-click="ddlprojectcategory_selectedchange(projectcategory.key, projectcategory.value);"> {{ projectcategory.value }} </a> </li> </ul> </div> <!-- dropdown control end --> </div> <div class="col-md-2"><span class="text-muted">{{ selectedkey }}</span></div> <div class="col-md-2"><span class="text-muted">{{ selectedvalue }}</span></div> </div> </div> </div> </div> </div> </body> </html>
i think should include typehead.min.js refer http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-typeahead.php
Comments
Post a Comment