Angular js typeahead is not working

Question

I am new to angular js. I have to enable the autocomplete functionality in the search box to display the list of states as and when I start typing the state's name. I tried using typeahead attribute, it is not working. Please find the code snippet below.

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;
     });

Answer 1

Working Plnkr

May be you did not add the external library properly. Type-ahead is dependent on ui-bootstrap-tpls . Add a valid cdn of ui-bootstrap-tpls , it should work.

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

Answer 2

在您的 html 文件中将“uib-”前缀添加到预先输入。

Angular js typeahead is not working

Question

Javascript

2 answers

solution1
0 2016-04-04 06:23:28

solution2
0 2016-04-04 07:52:44

Angular js typeahead is not working

Question

Javascript

2 answers

solution1 0 2016-04-04 06:23:28

solution2 0 2016-04-04 07:52:44

solution1
0 2016-04-04 06:23:28

solution2
0 2016-04-04 07:52:44