基于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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
JavaScript中的类继承
Nov 25 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
Python文件处理
2016/02/29 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
伊索寓言教学反思
2014/05/01 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang