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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
iview table高度动态设置方法
Mar 14 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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生成不重复随机数的方法汇总
2014/11/19 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP微商城开源代码实例
2019/03/27 PHP
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
python基础教程之五种数据类型详解
2017/01/12 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
C++面试题目
2013/06/25 面试题
介绍一下常见的木马种类
2014/11/15 面试题
拖欠货款起诉状
2015/05/20 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
思想品德课教学反思
2016/02/24 职场文书
创业计划书之家教托管
2019/09/25 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python