angular auto-suggestion text typeahead and html ul li dropdown

Question

I am creating auto-complete dropdown control using ul li .
The drop down is come out when user click my control.
User can select the item he want.
Then my program can print out selected key and value.
All are working fine but only one problem.

I want to display auto-suggestion list when user type into my control.

So I use typeahead but it does not work and it does not popout when user typing.

Plunker

<!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 a {
            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 for 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>

Answer 1

我认为您应该包括typehead.min.js请参阅此http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-typeahead.php

angular auto-suggestion text typeahead and html ul li dropdown

Question

1 answers

solution1
1 2016-04-19 04:48:37

angular auto-suggestion text typeahead and html ul li dropdown

Question

1 answers

solution1 1 2016-04-19 04:48:37

solution1
1 2016-04-19 04:48:37