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


Posted in Javascript onDecember 28, 2020

使用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>

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

Javascript 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
详解Layer弹出层样式
Aug 21 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
JavaScript闭包的简单应用
Sep 01 #Javascript
写给vue新手们的vue渲染页面教程
Sep 01 #Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 #Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 #Javascript
JavaScript中数组常见操作技巧
Sep 01 #Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 #Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Angular实现的进度条功能示例
2018/02/18 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
浅析Python数据处理
2018/05/02 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
综治宣传月活动总结
2014/04/28 职场文书
生产车间标语
2014/06/11 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
大学军训通讯稿
2015/07/18 职场文书
Python如何配置环境变量详解
2021/05/18 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
MongoDB数据库之添删改查
2022/04/26 MongoDB