在angularJs-$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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在React中使用Native如何实现自定义下拉刷新上拉加载的列表
在vue中如何解决无法动态修改jqgrid组件 url地址的问题
以上是在angularJs-$http中如何实现百度搜索时的动态下拉框的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
理解网页重定向的常见应用场景并了解HTTP301状态码
Feb 18, 2024 pm 08:41 PM
掌握HTTP301状态码的含义：网页重定向的常见应用场景随着互联网的迅猛发展，人们对网页交互的要求也越来越高。在网页设计领域，网页重定向是一种常见且重要的技术，通过HTTP301状态码来实现。本文将探讨HTTP301状态码的含义以及在网页重定向中的常见应用场景。HTTP301状态码是指永久重定向（PermanentRedirect）。当服务器接收到客户端发
HTTP 200 OK：了解成功响应的含义与用途
Dec 26, 2023 am 10:25 AM
HTTP状态码200：探索成功响应的含义与用途HTTP状态码是用来表示服务器响应状态的数字代码。其中，状态码200表示请求已成功被服务器处理。本文将探索HTTP状态码200的具体含义与用途。首先，让我们了解一下HTTP状态码的分类。状态码被分为五个类别，分别是1xx、2xx、3xx、4xx和5xx。其中，2xx表示成功的响应。而200是2xx中最常见的状态码
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
对于HTTP请求超时会返回哪种状态码？
Feb 18, 2024 pm 01:58 PM
HTTP请求超时，服务器端常常会返回504GatewayTimeout状态码。该状态码表示服务器在执行某个请求时，经过一段时间后仍未能获取到请求所需的资源或完成请求的处理。它是5xx系列的状态码，表示服务器端遇到了临时的问题或过载，导致无法正确处理客户端的请求。在HTTP协议中，各种状态码都有特定的含义和用途，而504状态码则用于表示请求超时问题。在客户
如何使用C++实现HTTP流传输？
May 31, 2024 am 11:06 AM
如何在C++中实现HTTP流传输？使用Boost.Asio和asiohttps客户端库创建SSL流套接字。连接到服务器并发送HTTP请求。接收HTTP响应头并打印它们。接收HTTP响应正文并打印它。
如何在JavaScript中获取HTTP状态码的简单方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务
HTTP 503错误怎么解决
Mar 12, 2024 pm 03:25 PM
解决方法：1、重试：可等待一段时间后重新尝试，或者刷新页面；2、检查服务器负载：检查服务器的CPU、内存和磁盘使用情况，如果超过了容量限制，可尝试优化服务器配置或增加服务器资源；3、检查服务器维护和升级：在服务器恢复正常之前，只能等待；4、检查网络连接：确保网络连接稳定，检查网络设备、防火墙或代理设置是否正确；5、确保缓存或CDN配置正确；6、联系服务器管理员等等。
