suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie ein dynamisches Dropdown-Feld während der Baidu-Suche in angleJs-$http

So implementieren Sie ein dynamisches Dropdown-Feld während der Baidu-Suche in angleJs-$http

亚连
亚连Original
2018-06-04 10:20:081482Durchsuche

Jetzt werde ich Ihnen ein Beispiel für ein dynamisches Dropdown-Feld bei der Verwendung von angleJs-$http zur Implementierung der Baidu-Suche vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Das Beispiel ist 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>

Das Obige ist das, wofür ich zusammengestellt habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine benutzerdefinierte Pull-Down-Aktualisierungs-Pull-Up-geladene Liste mit Native in React

in So lösen Sie das Problem, dass die URL-Adresse der jqgrid-Komponente in Vue nicht dynamisch geändert werden kann

So erreichen Sie eine ähnliche Taobao-Sternebewertung in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein dynamisches Dropdown-Feld während der Baidu-Suche in angleJs-$http. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So erkennen Sie Funktionen in der WebentwicklungNächster Artikel：So erkennen Sie Funktionen in der Webentwicklung

In Verbindung stehende Artikel

Mehr sehen