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关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
js替代copy(示例代码)
Nov 27 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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静态方法与非静态方法的用法区别
2016/05/17 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python requests库用法实例详解
2018/08/14 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
《称象》教学反思
2014/04/25 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
民事答辩状范本
2015/05/21 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript