我想在搜索文本框中显示静态建议，但没有显示任何内容。我正在关注这个https://codepen.io/joe-watkins/pen/EagEWv 。 这是我的代码。
HTML 代码:
<div>
<input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3" />
<div class="form-group">
<button type="button" class="btn btn-primary" ng-click="search()">
Get an answer ! <i class="fa fa-search"></i>
</button>
</div>
还有我的 Controller :
var Questions=["hello","hi","question1","question2","question2"];
$scope.questions=Questions;
最佳答案
检查浏览器控制台中是否有任何错误，因为您的代码确实有效。
1.确保您已包含所有依赖项:
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
2.注意 html 中的 ng-app="angularTypeahead" 和:
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
3.注意ng-controller="TypeaheadCtrl"和:
myApp.controller("TypeaheadCtrl", function($scope) {...});
4.完整代码:
这是一个 full code live demo
<html>
<head>
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body>
<div ng-app="angularTypeahead">
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<label for="states">Search for Answer</label>
<input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3">
<div class="form-group">
<button type="button" class="btn btn-primary" ng-click="search()">
Get an answer ! <i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope) {
var Questions = ["hello", "hi", "question1", "question2", "question2"];
$scope.questions = Questions;
});
</script>
</body>
</html>关于javascript - typeahead 未显示 bootstrap UI 和 angularjs 的建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37407935/