javascript - ui-bootstrap typeahead not working -
i trying write autocomplete text box ui-bootstrap not able see required suggestions. me please.
here html file have written:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>search cities</title> <!--bootstrap cdns begin --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--bootstrap cdns end--> <!--angularjs cdn begin--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <!--angularjs cdn end--> <!--typeahead begin--> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script> <!--typeahead end--> <link rel="stylesheet" href="/static/css/localstyle.css"> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-default navbar-inverse"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-items" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">cities search</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="nav-items"> <form class="navbar-form navbar-right" role="search" ng-app="myapp"> <input class='form-control container-fluid' ng-controller="citiestypeahead" placeholder="search name..." typeahead="suggestion suggestion in cities($viewvalue)"> <input id="navbar-submit-button" class="form-control" type="submit" value="go!"> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <script> var app = angular.module('myapp', ['ui.bootstrap']).controller('citiestypeahead', function ($scope, $http, limittofilter) { $scope.cities = function (phrase) { console.log(phrase); return $http.jsonp("http://gd.geobytes.com/autocompletecity?callback=json_callback &filter=us&q="+phrase).then(function (response) { return limittofilter(response.data, 5); }); }; }); </script>
i not able callback cities (function). there way debug javascript code?
Comments
Post a Comment