vue实现百度搜索下拉提示功能
这段代码用到vuejs和vue-resouece。实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
myData: [],
tt: '',
now: -1
},
methods: {
get: function(e) { // 请求限制 按了上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
return
}
// enter跳转
if (e.keyCode === 13) {
window.open('https://www.baidu.com/s?wd=' + this.tt);
this.tt = '';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
wd: this.tt
}, {
jsonp: 'cb'
}).then(function(res) {
// 请求成功
this.myData = res.data.s;
this.now = -1;
}, function(res) {
// 请求失败
console.log(res.status)
})
},
changeDown: function() {
this.now++;
// 到了最后一个选项
if (this.now === this.myData.length) {
this.now = -1;
}
this.tt = this.myData[this.now]
},
changeUp: function() {
this.now--;
// 到了第一个选项
if (this.now === -2) {
this.now = this.myData.length - 1;
}
this.tt = this.myData[this.now] }
}
})
}
</script>
<style type="text/css">
.gray {
background: gray
}
</style>
</head> <body>
<!-- 百度下拉接口 -->
<div id="box">
<input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">
<ul>
<li v-for="(item, index) in myData" :class="{gray:index===now}">{{item}}</li>
</ul>
</div>
</body> </html>
效果图：
这个ajax请求没有做节流，很多时候需要限制ajax频繁请求，可以小改一下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
myData: [],
tt: '',
now: -1
},
methods: {
get: function(e) { // 请求限制 按了上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
return
}
// enter跳转
if (e.keyCode === 13) {
window.open('https://www.baidu.com/s?wd=' + this.tt);
this.tt = '';
}
// 限制频繁请求
this.throttle(this.getData,window)
},
changeDown: function() {
this.now++;
// 到了最后一个选项
if (this.now === this.myData.length) {
this.now = -1;
}
this.tt = this.myData[this.now]
},
changeUp: function() {
this.now--;
// 到了第一个选项
if (this.now === -2) {
this.now = this.myData.length - 1;
}
this.tt = this.myData[this.now] },
// 把请求单独拿出来
getData() {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
wd: this.tt
}, {
jsonp: 'cb'
}).then(function(res) {
// 请求成功
this.myData = res.data.s;
this.now = -1;
}, function(res) {
// 请求失败
console.log(res.status)
})
},
// 节流函数
throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},300);
}
}
})
}
</script>
<style type="text/css">
.gray {
background: gray
}
</style>
</head> <body>
<!-- 百度下拉接口 -->
<div id="box">
<input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">
<ul>
<li v-for="(item, index) in myData" :class="{gray:index===now}">{{item}}</li>
</ul>
</div>
</body> </html>
vue实现百度搜索下拉提示功能的更多相关文章
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- z-blog博客组插件openSug.js百度搜索下拉框提示代码
z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...
- jquery 仿百度搜索下拉框的插件
转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...
- 利用 lucene.net 实现高效率的 WildcardQuery ，记一次类似百度搜索下拉关键字联想功能的实现。
打开百度输入 站内搜索也要实现类似功能.最基础的做法,写个方法查数据库搜索历史综合表keywordSearch(先将被搜索过的关键字记录到一张表,记录好他们被搜索的次数.上次搜索的有多少结果) 大概 ...
- JavaScript--模拟百度搜索下拉li
上效果: 主要思路: 函数indexOf() .join().innerHTML的使用,还有 用完的数组要清空 <!DOCTYPE html> <html> <head ...
- angular的跨域（angular百度下拉提示模拟）和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- Xamarin. Android实现下拉刷新功能
PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
随机推荐
- 【C】——dup/dup2用法
相信大部分在Unix/Linux下编程的程序员手头上都有<Unix环境高级编程>(APUE)这本超级经典巨著.作者在该书中讲解dup/dup2之前曾经讲过“文件共享”,这对理解dup/du ...
- sps和pps的简单理解记录
最近博客写出了日记的既视感... 使用RTP传输H264的时候,需要用到sdp协议描述,其中有两项:Sequence Parameter Sets (SPS) 和Picture Parameter S ...
- R matrix 转换为 dataframe
When I try converting a matrix to a data frame, it works for me: > x <- matrix(1:6,ncol=2,dimn ...
- Java如何显示一年的周数？
在Java中,如何查找一年中或一个月中的第几个星期? 以下示例显示年份和月份的第几周. package com.yiibai; import java.util.*; public class Dis ...
- Mybatis接口注解
在上一章中,我们已经搭建了 myeclipse,mybatis,mysql 的开发环境,并且实现了 mybatis 的一个简单的查询.要注意的是,这种方式是用 SqlSession 实例来直接执行在U ...
- Maven快照
大型应用软件一般由多个模块组成,一般它是多个团队开发同一个应用程序的不同模块,这是比较常见的场景.例如,一个团队正在对应用程序的应用程序,用户界面项目(app-ui.jar:1.0) 的前端进行开发, ...
- e839. 使JTabbedPane中的卡片可滚动
By default, all the tabs in a tabbed pane are displayed. When the tabs are wider than the width of t ...
- e792. 建立一个包括所有数据的SpinnerListModel
By default, if the user is browsing the values in a SpinnerListModel, the iteration stops when eithe ...
- android中清空一个表---类似truncate table 表名 这样的功能 android sqlite 清空数据库的某个表
public void clearFeedTable(){ String sql = "DELETE FROM " + FEED_TABLE_NAME +";" ...
- c# winform 获取当前程序运行根目录,winform 打开程序运行的文件夹
// 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径. System.Diagnostics.Process.G ...