Home >Web Front-end >JS Tutorial >How to implement a dynamic drop-down box during Baidu search in angularJs-$http

How to implement a dynamic drop-down box during Baidu search in angularJs-$http

亚连Original: 2018-06-04 10:20:081483browse

Now I will share with you an example of dynamic drop-down box when using angularJs-$http to implement Baidu search. It has a good reference value and I hope it will be helpful to everyone.

The example is as follows:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
     p{
      overflow: hidden;
      margin-top: 50px;
      margin-left: 500px;
     }
     .container{
      width: 250px;
      padding: 0;
     }
     .container li{
      list-style: none;
      border: 1px dotted gray;
      width: inherit;
     }
   </style>
  </head>
  <body>
   <p ng-controller="myCtrl">
     <input type="text" ng-model="name" placeholder="请输入内容..." ng-keyup="change(name)"/>
     <input type="button" name="" id="" value="搜索" ng-click="change(name)"/>
     <ul class="container">
      <li ng-repeat=" d in mes">{{d}}</li>
     </ul>
   </p>
  </body>
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
  <script src="angular-ui-router.min.js"></script>
  <script type="text/javascript">
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope,$http,$timeout){
     $scope.mes = [] ;
     var timer = null ;
     $scope.change = function(name){
      $timeout.cancel(timer);
      timer = $timeout(function(){
      
        $http({
        method:"JSONP",
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+name+"&json=1&p=3&sid=&req=2&csor=8&cb=JSON_CALLBACK"
        })
        .success(function(data){
         $scope.mes = data.s;
         console.log(data.s);
        })
      },500)
           
     }
   })
  </script>
</html>

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

How to use Native in React to implement custom pull-down refresh to pull-up loaded list

In How to solve the problem of being unable to dynamically modify the URL address of the jqgrid component in vue

How to achieve a similar Taobao star rating in vue

The above is the detailed content of How to implement a dynamic drop-down box during Baidu search in angularJs-$http. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to detect functions in web developmentNext article：How to detect functions in web development

See more

How to implement a dynamic drop-down box during Baidu search in angularJs-$http

Related articles