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 仿百度搜索功能实现代码
无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us
-
Vue实现百度下拉提示搜索功能
一.前期准备 网上大神已经做过这个功能https://github.com/lavyun/vue-demo-search 这自己仅实现搜索功能 为了使用百度实现搜索功能,首先搞清楚下拉数据和搜索功能的数据接口 01.提示数据获取地址 打开百度官网打开开发者调试工具,选中network一项,然后我们在搜索框输入'a',将会network发送的请求,这个就是提示数据的数据获取地址 提示数据获取地址.png 然后简化一下: 复制代码 代码如下: https://sp0.baidu.com/5a1Faz
-
使用 Vue.js 仿百度搜索框的实例代码
整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s
-
vue实现百度搜索下拉提示功能实例
这段代码用到vuejs和vue-resouece.实现对接智能提示接口,并通过上下键选择提示项,按enter进行搜索 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="
-
.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路
搞了个不是局部刷新的百度搜索框下拉提示效果,在被领导批了n次后,问了n次后,弄出来了,真心感觉我这个小脑壳,太不灵光了,太懒了.记录下来,以免忘记. 大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询 符合条件的数据绑定ListBox. 具体实现思路:一个input,当输入值变化时,调用后台代码.但是怎么调用呢,这个是个问题了,在该input下放一个隐藏的服务器控件button,隐藏该控件,当input里值变化时,调用js,在js里触发该按钮的onclick
-
php+ajax做仿百度搜索下拉自动提示框(有实例)
php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $
-
JS实现百度搜索接口及链接功能实例代码
本文通过代码给大家介绍js实现百度搜索接口及链接功能,具体代码如下所示: 在上篇文章给大家介绍了JS 实现百度搜索功能 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> *{ margin:0; padding:0; } #wei{ wid
-
vue组件实践之可搜索下拉框功能
之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 DROPDOWN.VUE <template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemli
-
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e
-
php+ajax实现仿百度查询下拉内容功能示例
本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquer
-
WinForm实现为ComboBox绑定数据源并提供下拉提示功能
本文实例展示了WinForm实现为ComboBox绑定数据源并提供下拉提示功能,这是一个非常有实用价值的功能,具体实现方法如下: 主要功能代码如下: /// <summary> /// 为ComboBox绑定数据源并提供下拉提示 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="combox">ComboBox<
-
基于vue实现可搜索下拉框定制组件
实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录. 一.效果 二.组件代码 dropdown.vue <template> <div class="vue-dropdown default-theme" v-show-extend="show"> <div class="search-module clearfix" v-show="length">
-
jQuery实现下拉框功能实例代码
说一百句,不如我给大家贴张效果图,效果图请看下面: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { m