angularJs-$http实现百度搜索时的动态下拉框示例


Posted in Javascript onFebruary 27, 2018

实例如下所示:

<!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="请输入内容..." 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>
   </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实现百度搜索时的动态下拉框示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
使用svg实现动态时钟效果
Jul 17 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 #Javascript
angular json对象push到数组中的方法
Feb 27 #Javascript
angularjs实现table增加tr的方法
Feb 27 #Javascript
关于redux-saga中take使用方法详解
Feb 27 #Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 #Javascript
angularJs 表格添加删除修改查询方法
Feb 27 #Javascript
ExtJs整合Echarts的示例代码
Feb 27 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php+mysql实现无限级分类
2015/11/11 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
初始Nodejs
2014/11/08 NodeJs
详解javascript事件绑定使用方法
2016/10/20 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python守护线程用法实例
2017/06/23 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python中的协程深入理解
2019/06/10 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
企业项目策划书
2014/01/11 职场文书
初中生操行评语大全
2014/04/24 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
车贷收入证明范本
2014/09/14 职场文书
共青团员自我评价范文
2014/09/14 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
社区灵活就业证明
2014/11/03 职场文书
撤诉书怎么写
2015/05/19 职场文书
《窃读记》教学反思
2016/02/18 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
vue中 this.$set的使用详解
2021/11/17 Vue.js