基于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.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
Vue.js对象转换实例
Jun 07 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
JS中图片压缩的方法小结
2017/11/14 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python进程间通信Queue实例解析
2018/01/25 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
环保倡议书500字
2014/05/15 职场文书
经营管理策划方案
2014/05/22 职场文书
文明生主要事迹
2014/05/25 职场文书
品质标语大全
2014/06/21 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
应收账款管理制度
2015/08/06 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL