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 相关文章推荐
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 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的FTP学习(四)
2006/10/09 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python实现FTP服务器服务的方法
2017/04/11 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
用python做游戏的细节详解
2019/06/25 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
软件设计的目标是什么
2016/12/04 面试题
早餐连锁店计划书
2014/01/08 职场文书
打架检讨书2000字
2014/02/22 职场文书
《泉水》教学反思
2014/04/11 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年销售工作总结
2014/12/01 职场文书
小学校园广播稿
2015/08/18 职场文书
请假条应该怎么写?
2019/06/24 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python