Of Stack

Angular implements a drop down list of cross domain of search boxes

  • 2021-07-21 07:13:38
  • OfStack

angular. js comes with jsonp to realize cross-domain. Let's realize the drop-down list of the search box, and try 1 by Baidu and 360 respectively

Baidu: After url interception, the red part 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: You need to run in a server environment

Thoughts:

1. Declare angular

2. The $http service is called in the controller function to read the data on the web server

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

4. Bind the function $scope. show=function () {}, executed at keyup

5. Call $http. jsonp (url)

6. Return the result and assign it 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  Yes 1 For reading web Service for data on the server. 
  $scope.data=[]; //  Bind data 
  $scope.show=function (){
    // $http.jsonp(url)  Is a function used to read server data. 
    $http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.t1+'&cb=JSON_CALLBACK').success(function (data){
      // The returned result is assigned to the $scope.data
      $scope.data=data.s;
    });
  };
});
</script>
</head>
<body ng-controller="test">
  <div>
    <!--  The input content is bound 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>
Related articles: