基于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中令你抓狂的魔术变量
Nov 30 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
js实现右键菜单功能
Nov 28 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JavaScript 截取字符串代码实例
Sep 05 Javascript
Js跳出两级循环方法代码实例
Sep 22 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开发中常用的十个代码样例
2016/02/02 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
jQuery事件对象总结
2016/10/17 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Python splitlines使用技巧
2008/09/06 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
Python flask框架端口失效解决方案
2020/06/04 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
python3的pip路径在哪
2020/06/23 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
Python截图并保存的具体实例
2021/01/14 Python
应届生个人求职信模板
2013/11/26 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年应急工作总结
2014/12/11 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python