有角度的自动建议文本排版和html ul li下拉列表

angular auto-suggestion text typeahead and html ul li dropdown

本文关键字：html ul 下拉列表 li 文本      更新时间：2023-09-26

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

当用户在我的控件中键入时，我想显示自动建议列表。

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

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>

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

相关文章：