快捷導(dǎo)航

angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例

更新時(shí)間：2018年02月27日 16:00:53 作者：Charles_pig

下面小編就為大家分享一篇angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

實(shí)例如下所示：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
     div{
      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>
   <div ng-controller="myCtrl">
     <input type="text" ng-model="name" placeholder="請輸入內(nèi)容..." ng-keyup="change(name)"/>
     <input type="button" name="" id="" value="搜索" ng-click="change(name)"/>
     <ul class="container">
      <li ng-repeat=" d in mes">{wppm3vysvbp}</li>
     </ul>
   </div>
  </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>

以上這篇angularJs-$http實(shí)現(xiàn)百度搜索時(shí)的動(dòng)態(tài)下拉框示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能,涉及AngularJS事件響應(yīng)實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能的相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
AngularJS 入門教程之事件處理器詳解
本文主要介紹AngularJS 事件處理器,這里整理了相關(guān)資料和示例代碼，有需要的小伙伴可以參考下
2016-08-08
Angular2使用SVG自定義圖表（條形圖、折線圖）組件示例
這篇文章主要介紹了Angular2使用SVG自定義圖表（條形圖、折線圖）組件,涉及Angular結(jié)合svg進(jìn)行圖表繪制的相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
Angular限制input框輸入金額（是小數(shù)的話只保留兩位小數(shù)點(diǎn)）
最近做項(xiàng)目遇到這樣的需求輸入框要求輸入金額，只能輸入數(shù)字，可以是小數(shù)，必須保留小數(shù)點(diǎn)后兩位。下面分為兩部分代碼給大家介紹實(shí)現(xiàn)代碼，需要的的朋友參考下吧
2017-07-07
Angularjs CURD 詳解及實(shí)例代碼
這篇文章主要介紹了Angularjs CURD 詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09
詳解如何在Angular中引入Mock.js
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
angular2 組件之間通過service互相傳遞的實(shí)例
今天小編就為大家分享一篇angular2 組件之間通過service互相傳遞的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
淺談AngularJS中$http服務(wù)的簡單用法
這篇文章主要介紹了淺談AngularJS中$http服務(wù)的簡單用法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
AngularJS學(xué)習(xí)第一篇 AngularJS基礎(chǔ)知識(shí)
這篇文章主要介紹了AngularJS學(xué)習(xí)第一篇，分享了有關(guān)AngularJS的基礎(chǔ)知識(shí)，主要包括指令、過濾器等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02