基于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获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
javascript制作2048游戏
Mar 30 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
Vue实现todo应用的示例
Feb 20 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
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP _construct()函数讲解
2019/02/03 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
ie focus bug 解决方法
2009/09/03 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python httplib模块使用实例
2015/04/11 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
对python周期性定时器的示例详解
2019/02/19 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python读写压缩文件的方法
2020/07/30 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
四风批评与自我批评发言稿
2014/10/14 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
小学生运动会广播
2015/08/19 职场文书
素质教育培训心得体会
2016/01/19 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
MSSQL基本语法操作
2022/04/11 SQL Server
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS