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判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 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
新52大事件
2020/03/03 欧美动漫
人大复印资料处理程序_补充篇
2006/10/09 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
python 读取DICOM头文件的实例
2018/05/07 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
Java基础类库面试题
2013/09/04 面试题
毕业自荐书
2013/12/09 职场文书
创建文明学校实施方案
2014/03/11 职场文书
出生医学证明书
2014/09/15 职场文书
在校生证明
2015/06/17 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers