suchen

Heim >Web-Frontend >js-Tutorial >$http implementiert das dynamische Dropdown-Feld für die Baidu-Suche

$http implementiert das dynamische Dropdown-Feld für die Baidu-Suche

小云云
小云云Original
2018-03-01 09:54:301802Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich das Beispiel eines dynamischen Dropdown-Felds bei der Implementierung der Baidu-Suche mit angleJs-$http. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Das Beispiel lautet wie folgt: 

<!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>

Verwandte Empfehlungen:

angularjs verwendet $http, um die gemeinsame Nutzung von Excel-Dateien asynchron hochzuladen

$http-Dienstinhalt in AngularJS

Detaillierte Codeerklärung von AngularJS, die $http.post- und $http.get-Anfragen implementiert

Das obige ist der detaillierte Inhalt von$http implementiert das dynamische Dropdown-Feld für die Baidu-Suche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

异步 http excel
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das Angularjs-Array bestimmt den Instanzcode eines ElementsNächster Artikel：Das Angularjs-Array bestimmt den Instanzcode eines Elements

In Verbindung stehende Artikel

Mehr sehen