Vue 仿百度搜索功能实现代码


Posted in Javascript onFebruary 16, 2017

无上下选择

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jsonp</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <script src="../js/Vue.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{
     myData:[],
     t1:''
    },
    methods:{
     get:function(){
      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
       wd:this.t1
      },{
       jsonp:'cb'
      }).then(function(res){
       this.myData=res.data.s
      },function(){
      });
     }
    }
   });
  }
 </script>
</head>
<body>
<div id="box">
 <input type="text" v-model="t1" @keyup="get()">
 <ul>
  <li v-for="value in myData">{{value}}</li>
 </ul>
 <p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>

加上上下选择

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jsonp</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <style>
  .gray{
   background: #ccc;
  }
 </style>
 <script src="../js/vue1.0.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  window.onload=function(){
   new Vue({
    el:'body',
    data:{
     myData:[],
     t1:'',
     now:-1
    },
    methods:{
     get:function(ev){
      if(ev.keyCode==38||ev.keyCode==40){
       return;
      }
      if(ev.keyCode==13){
       window.open('https://www.baidu.com/s?wd='+this.t1);
       this.t1='';
      }
      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
       wd:this.t1
      },{
       jsonp:'cb'
      }).then(function(res){
       this.myData=res.data.s;
      },function(){
      });
     },
     changeDown:function(){
      this.now++;
      if(this.now==this.myData.length)this.now=-1;
      this.t1=this.myData[this.now];
     },
     changeUp:function(){
      this.now--;
      if(this.now==-2)this.now=this.myData.length-1;
      this.t1=this.myData[this.now];
     }
    }
   });
  };
 </script>
</head>
<body>
<div id="box">
 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
 <ul>
  <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
 </ul>
 <p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>

以上所述是小编给大家介绍的Vue 仿百度搜索功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
javascript实现秒表计时器的制作方法
Feb 16 #Javascript
jQuery实现搜索页面关键字的功能
Feb 16 #Javascript
canvas时钟效果
Feb 16 #Javascript
支持移动端原生js轮播图
Feb 16 #Javascript
jQuery为DOM动态追加事件的方法
Feb 16 #Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php文件包含的几种方式总结
2019/09/19 PHP
语义化 H1 标签
2008/01/14 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python实现小世界网络生成
2019/11/21 Python
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
大学四年个人的自我评价
2014/02/26 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
基层党建工作简报
2015/07/21 职场文书
开学随笔
2015/08/15 职场文书
贷款担保书范本
2015/09/22 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python