AngularJS bootstrap下拉菜单链接到输入字段按键以进行自动完成

时间:2014-01-12 19:20:19

标签: angularjs jsonp twitter-bootstrap-3

我是angulajs的初学者。我正在尝试编写此代码,当我输入搜索文本的字母时,会显示搜索字段的Google搜索建议。

这就是我在boostrap 3导航栏中完成此操作的方法:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <div class="col-sm-4 col-md-4 pull-right dropdown" ng-controller="SearchCtrl">
        <div class="navbar-form input-group">
          <input type="text" class="form-control" placeholder="Search" name="q" id="dropdownMenu1" ng-model="text" ng-keyup="suggest()" data-toggle="dropdown">
            <div class="input-group-btn">
              <button class="btn btn-success" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </div>
          <ul class="dropdown-menu" role="menu">
            <li ng-repeat="result in results"><a href="#">{{result}}</a></li>
          </ul>
        </div>
     </div>
  </div>
</div>

相应的AngularJS代码:

  app.controller('SearchCtrl', function ($scope, $http) {
    $scope.suggest = function() {
      var url = "http://google.com/complete/search?callback=JSON_CALLBACK&output=firefox&q=" + $scope.text;
      $http.jsonp(url).success(function(data) {
          $scope.results = data[1]; 
      });
   }; 
  });

但出于某种原因,建议的下降没有出现。 我在调试控制台中监视并看到请求通过很好地返回建议,所以没有javascript错误。

如果有任何建议,如何使其工作(在bootstrap和angularjs中),我们表示赞赏。

干杯:))

P.S。在调试中,当我输入“welcome”字时,我看到下拉列表已创建并填充正常:

screenshot

0 个答案:

没有答案