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 代码也可以变得优美的实现方法
Jun 22 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
第一个无线电台是由谁发明的
2021/03/01 无线电
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
简单使用Python自动生成文章
2014/12/25 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Python龙贝格法求积分实例
2020/02/29 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
卫校毕业生自我鉴定
2013/10/31 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
开会迟到检讨书
2014/01/08 职场文书
材料员岗位职责
2014/03/13 职场文书
委托公证书
2014/04/08 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
入党推优材料
2014/06/02 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js