首页 web前端 js教程 $http实现百度搜索动态下拉框

$http实现百度搜索动态下拉框

Mar 01, 2018 am 09:54 AM
http 动态 搜索

本文主要和大家分享angularJs-$http实现百度搜索时的动态下拉框示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

实例如下所示:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
     p{
      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>
   <p 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>
   </p>
  </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异步上传Excel文件方法分享

AngularJS中$http服务内容

angularJS实现$http.post和$http.get请求的代码详解

以上是$http实现百度搜索动态下拉框的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

将VirtualBox固定磁盘转换为动态磁盘,反之亦然 将VirtualBox固定磁盘转换为动态磁盘,反之亦然 Mar 25, 2024 am 09:36 AM

在创建虚拟机时,系统会要求您选择磁盘类型,您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘,后来意识到需要动态磁盘,或者相反,该怎么办?好!你可以把一种转换成另一种。在这篇文章中,我们将看到如何将VirtualBox固定磁盘转换为动态磁盘,反之亦然。动态磁盘是一种虚拟硬盘,它最初具有较小的大小,随着您在虚拟机中存储数据,其大小会相应增长。动态磁盘在节省存储空间方面非常高效,因为它们只占用所需的主机存储空间。然而,随着磁盘容量的扩展,可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

闲鱼怎么搜索用户 闲鱼怎么搜索用户 Feb 24, 2024 am 11:25 AM

闲鱼怎么搜索用户?在软件闲鱼中,我们可以直接在软件里面去找到想要沟通的用户。但却不清楚要怎么搜索用户。在搜索后的用户中查看即可。接下来就是小编为用户带来的搜索用户方式介绍的介绍,感兴趣的用户快来一起看看吧!闲鱼怎么搜索用户答:在搜索后的用户中查看详情介绍:1、进入软件,点击搜索框。2、输入用户名称,点击搜索。3、再选择搜索框下的【用户】,即可找到对应用户了。

百度高级搜索怎么用 百度高级搜索怎么用 Feb 22, 2024 am 11:09 AM

百度高级搜索怎么用百度搜索引擎是目前中国最常用的搜索引擎之一,它提供了丰富的搜索功能,其中之一就是高级搜索。高级搜索可以帮助用户更精确地搜索到所需的信息,提高搜索效率。那么,百度高级搜索怎么使用呢?第一步,打开百度搜索引擎首页。首先,我们需要打开百度的官方网站,即www.baidu.com。这是百度搜索的入口。第二步,点击高级搜索按钮。在百度搜索框的右侧,有

wps表格找不到正在搜索的数据,请检查搜索选项位置 wps表格找不到正在搜索的数据,请检查搜索选项位置 Mar 19, 2024 pm 10:13 PM

智能为主导的时代,办公软件也普及开来,Wps表格由于它的灵活性被广大的办公人员采用。在工作中要求我们不只是要学会简单的表格制作和文字录入,我们要掌握更多的操作技能,才能完成实际工作中的任务,有数据的报表,运用表格更方便更清楚更准确。今天我们给大家带来的课程是:wps表格找不到正在搜索的数据,为什么请检查搜索选项位置?1、首先选中Excel表格,双击打开。然后在该界面中,选中所有的单元格。  2、然后在该界面中,点击顶部工具栏里“文件”里的“编辑”选项。  3、其次在该界面中,点击顶部工具栏里的“

手机淘宝怎么搜索店铺 搜索店铺名的方法 手机淘宝怎么搜索店铺 搜索店铺名的方法 Mar 13, 2024 am 11:00 AM

  手机淘宝app软件内提供的商品好物非常多,随时随地想买就买,而且件件都是正品,每一件商品的价格标签一清二楚,完全没有任何的复杂操作,享受更加便捷的购物乐趣。随心所欲自由搜索选购,不同品类的商品板块都是开放的,添加个人的收货地址以及联系电话,方便快递公司联系到你,实时查看最新的物流动态,那么有些新人用户第一次使用它,不知道如何搜索商品,当然只需要在搜索栏输入关键词就能找到所有的商品结果,自由选购根本停不下来,现在小编在线详细为手机淘宝用户们带来搜索店铺名的方法。  1.首先打开手机淘宝app,

理解网页重定向的常见应用场景并了解HTTP301状态码 理解网页重定向的常见应用场景并了解HTTP301状态码 Feb 18, 2024 pm 08:41 PM

掌握HTTP301状态码的含义:网页重定向的常见应用场景随着互联网的迅猛发展,人们对网页交互的要求也越来越高。在网页设计领域,网页重定向是一种常见且重要的技术,通过HTTP301状态码来实现。本文将探讨HTTP301状态码的含义以及在网页重定向中的常见应用场景。HTTP301状态码是指永久重定向(PermanentRedirect)。当服务器接收到客户端发

Excel搜索快捷键是什么 Excel搜索快捷键是什么 Mar 20, 2024 am 10:52 AM

想知道Excel搜索快捷键是什么吗?答案很简单,只需要用到【Ctrl+F】就能进行快速搜索了。我们经常用Excel来记录很多不同的数据和名称,如果需要更改的时候,因为数据太多,我们在寻找的时候会很不方便,这样查找起来会相当麻烦。其实,我们完全可以用一下快速搜索的快捷方式来找到我们需要更改的数据!那么,Excel的搜索快捷键是什么呢?今天就来教大家excel表格里面的快捷查找按键,给你们的工作省心省力。这里我用的是本MicrosoftOfficeexcel2010版本来进行演示的,有需要的同学可以

阿里云盘怎么搜索别人的资源 阿里云盘怎么搜索别人的资源 Mar 30, 2024 am 10:31 AM

阿里云盘,这款备受欢迎的存储工具,不仅可以帮助我们高效管理个人资源,还提供了诸多便利功能。那么许多用户在搜索云盘资源的时候,可能会搜不到,所以想要搜索全盘的所有资源,那么在下文中就由本站小编来为大家详细解答这一问题,分享具体的搜索方法,想要了解的用户们就快来跟着本文一起操作了解吧!阿里云盘搜怎么索别人的资源1、首先在阿里云盘的文件夹目录中搜索资源文件的具体路径即可找到对应的文件夹了。2、然后使用文件搜索功能,输入想要查找的关键字即可找到相关的文件内容。3、接着我们通过其他人分享链接,直接定位和下

See all articles