Angular js typeahead不起作用

Angular js typeahead is not working

本文关键字：不起作用 typeahead js Angular      更新时间：2023-12-14

我是angular js的新手。我必须在搜索框中启用自动完成功能，以便在开始键入州名称时显示州列表。我尝试过使用typeahead属性，但它不起作用。请在下面找到代码片段。

HTML

<!doctype html>
<html ng-app="dlcProjectApp">
<head>
 <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title></title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="toastr.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.browser.js"></script>
<script type="text/javascript" data-require="angular.js@*" src="angularjs.js"></script>
  <script type="text/javascript" data-require="angular-animate@*" src="angular-animate.js"></script>
  <script type="text/javascript" src="ui-bootstrap-tpls-1.2.5.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
 <script type="text/javascript" src="projectApp.js"></script>
  <meta charset="utf-8">
  <title>Title</title>
  <style>
body {
  max-width: 32em;
  margin: 1em auto 0;
}
img { width: 30px; }
  </style>
</head>
<body>
            <div ng-app="dlcProjectApp">
    <div class="container-fluid" ng-controller="dlcProjectController">
        <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
          <label for="states4">Search for US States</label>
            <input name="states1" id="states2" type="text" placeholder="enter a state" ng-model="selected" typeahead="state for state in states" class="form-control">
    <button class="btn btn-success" type="submit">Submit</button>
    </div>
</div>
</body>
</html>

Javascript

var dlcProject = angular.module('dlcProjectApp',['ui.bootstrap']);
dlcProject.factory("States", function(){
      var 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"];
      return states;
    });
dlcProject.controller('dlcProjectController',function($scope,$http,$compile,$timeout,States){
    $scope.selected = undefined;
    $scope.states = States;
     });

工作程序

可能是您没有正确添加外部库。提前键入取决于ui-bootstrap-tpls。添加ui-bootstrap-tpls的有效cdn，它应该可以工作。

<script   src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

在html文件的typeahead中添加"uib-"前缀。

相关文章：