基于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 相关文章推荐
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
js获取url传值的方法
Dec 18 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
Nest.js散列与加密实例详解
Feb 24 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
python增加矩阵维度的实例讲解
2018/04/04 Python
Python根据成绩分析系统浅析
2019/02/11 Python
python自动生成model文件过程详解
2019/11/02 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
装修设计师求职信
2014/02/26 职场文书
幼儿园新年寄语
2014/04/03 职场文书
老师对学生的评语
2014/04/18 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript