Angular Implementation of Cross-domain (Drop-down List of Search Box)

angular.js comes with jsonp, which implements cross-domain, let's implement the dropdown list of the search box using Baidu and360 try them out

Baidu:The red part after the URL is截取 needs to be replaced :https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=data&cb=JSON_CALLBACK

360:https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=data

Note:It needs to be run in a server environment

Thoughts:

　　1 .Declare angular

　　2 .Controller function calls $http service to read data from the web server

　　3 .Bind data $scope.data=[] to store the returned data

　　4 .Bind function $scope.show=function(){} to execute on keyup

　　5 .Invoke $http.jsonp(url)

　　6 .Assign the return result to $scope.data, $scope.data=data.s;

The following code

!doctype html
<html ng-app="app">
<head>
<meta charset="utf-8">
<style>
</style>
<script src="angular.js"></script>
<script>
var app=angular.module('app',[]); //Declaration
app.controller('test',function ($scope,$http){ // $http is a service used to read data on web servers.
  $scope.data=[]; // Binding data
  $scope.show=function (){
    // $http.jsonp(url) is a function used to read data from the server.
    $http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.t1+'&cb=JSON_CALLBACK').success(function (data){
      //The result is assigned to $scope.data
      $scope.data=data.s;
    });
  };
});
</script>
</head>
<body ng-controller="test">
  <div>
    <!-- bind input content to t1 ，ng-keyup="show()" -->
    <input type="text" ng-model="t1" ng-keyup="show()" />
  </div>
  <ul>
    <!-- Data Display -->
    <li ng-repeat="item in data">{{item}}</li>
  </ul>
</body>
</html>

The above is what the editor has introduced to everyone about Angular's implementation of cross-domain (search box dropdown list), hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Thank you very much for everyone's support for the Yelling tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial