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

实例如下所示：

<!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实现百度搜索时的动态下拉框示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular实现下拉框模糊查询功能示例

    Angular实现下拉框模糊查询功能示例

    本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"

  • Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp,实现跨域,下面来实现搜索框的下拉列表,使用百度和360分别尝试一下 百度:url截取之后红色部分需替换 :https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=数据&cb=JSON_CALLBACK 360:https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=数据 注意:需要在服务器环境下运行 思路: 1 .声明 angular 2

  • Angularjs实现下拉框联动的示例代码

    Angularjs实现下拉框联动的示例代码

    第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model

  • AngularJS使用ng-options指令实现下拉框

    AngularJS使用ng-options指令实现下拉框

    ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. 1.问题背景 一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

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

    实例如下所示: <!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; } .con

  • ajax实现动态下拉框示例

    许多页面上都涉及有下拉框,即select标签.对于简单的下拉框,被选择的数据是不需要改变的,我们可以用<option></option>写死.这样下拉框的数据永远都是那几条. 示例: <select> <option>信息一</option> <option>信息二</option> <option>信息三</option> <option>信息四</option> <

  • bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享

    1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.success').removeClass('success');// 清除前一次操作已选中行的选中状态 $($element).addClass('success');// 选中行添加选中状态 }); 2.bootstrap-table 获取选中行信息 function getSelectedRow

  • jquery动态加载select下拉框示例代码

    如题,直接上代码,实战学习. 复制代码 代码如下: <head><title>jquery实现动态加载select下拉选项</title> <script type="text/javascript"> function init(){ makemoduleSelect(); } //加载模板下拉框选项 function makemoduleSelect(){ $.ajax({ url : 'indexStatisticsAction_g

  • js制作的鼠标悬浮时产生的下拉框效果

    先给大家补补课,讲个简单的例子: 复制代码 代码如下: <html><head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <script type="text/javascript"> jq=jQuery.noConflict(); jq=(document).rea

  • JS实现关键字搜索时的相关下拉字段效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" rel="external nofollow" rel=

  • ajax智能提示+textbox动态生成下拉框示例代码

    ajax智能提示+textbox动态生成下拉框示例代码

    复制代码 代码如下: <div class="searchwellist">快捷查询:<select id="searchSelect" runat="server"><option value="1" selected="selected">按内管码</option><option value="2">按标记码</opt

  • Layui带搜索的下拉框的使用以及动态数据绑定方法

    说起下拉框大家一定不陌生,就是放着指定内容的容器需要什么就直接选择就可以了,很方便.但是凡事都有利弊两面,在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花,影响用户体验.所以就有了带查询的下拉框出现,这个下拉框的功能很强大,结合了输入框和下拉框为一体,既可以进行模糊查询,又可以直接选择,比以前的下拉框更加方便了.今天要介绍的就是layui的form表单组件里的带查询的下拉框. 用任何插件都需要引用相应的css文件和js文件,在这就不多说了.但layui的form表单组件不仅要引用插件还

  • jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

    jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

    本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>

  • JS仿百度自动下拉框模糊匹配提示

    JS仿百度自动下拉框模糊匹配提示

    实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery

随机推荐