基于Vue.js 2.0实现百度搜索框效果

更新时间：2020年12月28日 15:04:49 作者：Mr.曹

这篇文章主要为大家详细介绍了基于Vue.js 2.0实现百度搜索框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Vue模拟百度搜索</title>
 <style type="text/css">
 body, html{
 padding: 0;
 margin: 0;
 }
 #box{
 margin-top: 80px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 .input{
 width: 500px;
 height: 30px;
 text-indent: 4px;
 }
 .baidu input{
 height: 30px;
 cursor: pointer;
 color: #fff;
 letter-spacing: 1px;
 background: #3385ff;
 border: 1px solid #2d78f4;
 }
 ul{
 padding: 0;
 margin-top: 6px;
 }
 li{
 list-style: none;
 margin: 4px;
 }
 li:hover{
 background: #ccc;
 }
 .bgcolor {
 background: #ccc;
 }
 </style>
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
 <script type="text/javascript">
 window.onload = function() {
 new Vue({
  el: '#box',
  data: {
  inputText: '',
  text: '',
  nowIndex: -1,
  result: []
  },
  methods: {
  show (ev) {
   if (ev.keyCode == 38 || ev.keyCode == 40) {
   if (this.nowIndex < -1){
    return;
   }
   if (this.nowIndex != this.result.length && this.nowIndex != -1) {
    this.inputText = this.result[this.nowIndex];
   }
   return;
   }
   if (ev.keyCode == 13) {
   window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
   this.inputText = '';
   }
   this.text = this.inputText;
   this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
   params: {
    wd: this.inputText
   },
   jsonp: 'cb'
   }).then(res => {
   this.result = res.data.s;
   })
  },
  goto () {
   window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
   this.inputText = '';
  },
  gotoItem(item) {
   window.open('https://www.baidu.com/s?wd=' + item, '_blank');
   this.inputText = '';
  },
  down () {
   this.nowIndex++;
   if (this.nowIndex == this.result.length) {
   this.nowIndex = -1;
   this.inputText = this.text;
   }
  },
  up () {
   this.nowIndex--;
   if (this.nowIndex < -1){
   this.nowIndex = -1;
   return;
   }
   if (this.nowIndex == -1) {
   this.nowIndex = this.result.length;
   this.inputText = this.text;
   }
  }
  }
 });
 }
 </script>
</head>
 
<body>
 <div id="box">
 <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129">
 <div>
  <div>
  <input 
   type="text" 
   class="input" 
   placeholder="请输入搜索内容 " 
   v-model='inputText' 
   @keyup='show($event)' 
   @keydown.down='down()' 
   @keydown.up.prevent='up()'
  >
  <span class="baidu" @click="goto()">
   <input type="submit" value="百度一下" >
  </span>
  </div>
  
  <ul>
  <li v-for="(item, index) in result" :class='{bgcolor: index==nowIndex}' @click="gotoItem(item)">
   {{item}}
  </li>
  </ul>
 </div>

 </div>
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2实现无感刷新token的方式详解
在Web应用中,用户需要通过认证和授权才能访问受保护的资源,为了实现认证和授权功能,通常需要使用Token来标识用户身份并验证其权限,本文给大家介绍了vue2实现无感刷新token的方式,需要的朋友可以参考下
2024-02-02
vue中jsonp的使用方法
这篇文章主要介绍了vue中jsonp的使用方法,文章从安装开始展开具体的vue中jsonp的使用详细内容,需要的朋友可以参考一下，希望对大家有所帮助
2021-11-11
解决vue打包css文件中背景图片的路径问题
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
elementPlus 的el-select在提示框关闭时自动弹出的问题解决
这篇文章主要介绍了elementPlus 的el-select在提示框关闭时自动弹出闭时自动弹出的问题,主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发,感兴趣的朋友跟随小编一起看看吧
2024-01-01
Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下
2019-04-04
手把手教你在vue中使用three.js
最近在vue3项目中通过three.js实现了实际的三维效果demo,下面这篇文章主要给大家介绍了关于在vue中使用three.js的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue通过数据过滤实现表格合并
这篇文章主要为大家详细介绍了vue通过数据过滤实现表格合并，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue组件挂载到全局方法的示例代码
这篇文章主要介绍了vue组件挂载到全局方法的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue与React的区别和优势对比
这篇文章主要介绍了Vue与React的区别和优势对比，帮助大家更好的选择适合自己的前端框架，迷茫的同学可以进来参考下
2020-12-12
vue 结合webpack的初级使用指南小白学习篇
这篇文章主要为大家介绍了vue 结合webpack的初级使用指南非常适合入门webpack的小白学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05