Question

我正在使用ul li创建自动完成下拉控件当用户点击我的控件时，下拉菜单会出现用户可以选择他想要的项目然后我的程序可以打印出选定的键和值一切正常，但只有一个问题。

我想在用户输入我的控件时显示自动建议列表。

所以我使用typeahead但它不起作用，并且在用户输入时不会弹出。

<!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

角度自动建议文本typeahead和html ul li下拉列表

1 个答案: