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实现百度搜索时的动态下拉框示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍Angularjs实现下拉框联动的示例代码，包括了Angularjs实现下拉框联动的示例代码的使用技巧和注意事项，需要的朋友参考一下 第一种联动方式，在网上看到的，感觉对于我的使用性不高，比较后端不会提供这种json。。。 实现截图 html js 第二种联动方式，这次是根据后台要求，自己写的一个联动，当然没有请求接口，就是单独写个固定值 1.联动的思路 1.首先是选择总类别 2.总
-
本文向大家介绍基于Vue.js 2.0实现百度搜索框效果，包括了基于Vue.js 2.0实现百度搜索框效果的使用技巧和注意事项，需要的朋友参考一下 使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍使用Ajax模仿百度搜索框的自动提示功能实例，包括了使用Ajax模仿百度搜索框的自动提示功能实例的使用技巧和注意事项，需要的朋友参考一下 啊啊，熬夜了。今天学习了ajax给我的感觉就是，”哇塞“ajax好酷炫哦，（额。。。后端狗，接触到了大前端的魅力了），这么晚了还是直奔主题把。Let's go! 百度搜索提示框，我想大家都很熟悉了把，是什么样子我也就不再赘述。直接看代码 来我们写一
-
本文向大家介绍JS 实现百度搜索功能，包括了JS 实现百度搜索功能的使用技巧和注意事项，需要的朋友参考一下 今天我们来用JS实现百度搜索功能，下面上代码： HTML部分： CSS层叠样式部分： JS部分： 搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=hou
-
本文向大家介绍jsonp实现百度下拉框功能的方法分析，包括了jsonp实现百度下拉框功能的方法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jsonp实现百度下拉框功能的方法。分享给大家供大家参考，具体如下： 思路就是获取用户输入，然后根据用户输入调用百度的一个接口jsonp实现跨域请求，然后将百度返回给的内容渲染数据到视图。需要注意的就是，发送请求的时候记得编码用户输入的内容 更多
-
本文向大家介绍JS仿百度自动下拉框模糊匹配提示，包括了JS仿百度自动下拉框模糊匹配提示的使用技巧和注意事项，需要的朋友参考一下 实际项目中，我们可以把数据获取改成ajax动态获取，在 getContent()中 以上所述是小编给大家介绍的JS仿百度自动下拉框模糊匹配提示，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！