基于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 相关文章推荐
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
javascript关于继承解析
May 10 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
Openlayers实现地图的基本操作
Sep 28 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php开发工具之vs2005图解
2008/01/12 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python生成并处理uuid的实现方式
2020/03/03 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
销售工作岗位职责
2013/12/24 职场文书
大学生秋游活动方案
2014/02/17 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript