vue实现百度搜索功能


Posted in Javascript onDecember 28, 2020

本文实例为大家分享了vue实现百度搜索功能的具体代码,供大家参考,具体内容如下

最终效果:

vue实现百度搜索功能

Baidusearch.vue所有代码:

<template>
 <div>
 <div class="container" id="app">
 <div class="page-header">
  <h2 class=" text-center text-primary">百度搜索案例</h2>
 </div>
 <form action="">
  <div class=" form-group">
  <input v-model="wd" @keyup="keyup($event)" @keydown="keydown($event)" type="text" class="form-control" />
  <ul class="list-group">
  <li class="list-group-item list-group-item-text" v-for="(item,index) in arr" :class="{'list-group-item-info':index==listIndex}" @click="click($event)">{{item}}</li>
  </ul>
  </div>
 </form>
 </div>
 </div>
</template>
 
<script>
 export default {
 name: "Baidusearch",
 data(){
  return{
  wd:'',//搜索的关键词
  arr:[],//用于储存关键词的搜索词条
  listIndex:-1//设置初始索引,数组从0开始,因此初始成-1
  }
 },
 methods:{
 //这个函数我们在input标签输入关键词的时候不断的给百度服务器发送请求获取搜索词条,并且不断的复制给data中的数组arr
 keyup(event){
  //如果我按的是上下键,那么就不发送请求了
  console.log(event);
  if(event.keyCode==38||event.keyCode==40||event.keyCode==13) return ;
  var url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
  this.$http.jsonp(url,{
  params:{
  wd:this.wd
  },
  jsonp:'cb'
  }).then(res=>{
  console.log(res);
  this.arr=res.data.s;//把百度服务器返回的数据传给arr数组
  })
 },
 //监听鼠标的点击事件
 //如果鼠标点击某一行的文字,则点击事件中的event.explicitOriginalTarget.data代表关键词
 //如果点击某一行的空白处,则点击事件中的event.explicitOriginalTarget.innerText代表关键词
 //大家可以通过console.log(event)来查看关键词所在的位置
 click(event){
  console.log(event);
  if(event.explicitOriginalTarget.data!=undefined){
  this.wd=event.explicitOriginalTarget.data;
  window.open("https://www.baidu.com/s?wd="+this.wd);
  }else if(event.explicitOriginalTarget.innerText!=undefined){
  this.wd=event.explicitOriginalTarget.innerText;
  window.open("https://www.baidu.com/s?wd="+this.wd);
  }
 },
 //监听键盘的事件
 //如果按down,则增加当前listIndex+1,因此arr[this.listIndex]就能代表当前的词条
 //我们通过对listIndex的修改来得到当前词条在arr中的索引,然后就可以得到词条的具体信息,然后发送请求了
 keydown(event){
  console.log(event);
  //下键:40 上键:38
  if(event.keyCode==38){
  //按的上键
  this.listIndex--;
  if(this.listIndex<0){
  this.listIndex=this.arr.length-1;
  }
  this.wd=this.arr[this.listIndex];
  }
  else if(event.keyCode==40){
  //说明你按的是下键
  this.listIndex++;
  if(this.listIndex>this.arr.length-1){
  this.listIndex=0;
  }
  this.wd=this.arr[this.listIndex];
  }else if(event.keyCode==13){
  //如果你按的是enter,那么就跳转到百度搜索结果
  window.open("https://www.baidu.com/s?wd="+this.wd);
  }
 
 }
 }
 }
</script>
 
<style scoped>
 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
小程序实现搜索框
Jun 19 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 #Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 #Javascript
react实现同页面三级跳转路由布局
Sep 26 #Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 #Javascript
小程序调用微信支付的方法
Sep 26 #Javascript
细说webpack6 Babel的使用详解
Sep 26 #Javascript
微信小程序实现拖拽功能
Sep 26 #Javascript
You might like
php,不用COM,生成excel文件
2006/10/09 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python3 log10()函数简单用法
2019/02/19 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
python一些性能分析的技巧
2020/08/30 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Python实现壁纸下载与轮换
2020/10/19 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
毕业生求职推荐信
2013/11/04 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书