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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
JS实现小米轮播图
Sep 21 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
页面乱码问题的根源及其分析
2013/08/09 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python单元测试与测试用例简析
2019/11/09 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
新品发布会策划方案
2014/06/08 职场文书
娱乐节目策划方案
2014/06/10 职场文书
尊师重教演讲稿
2014/09/04 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
写给老师的感谢信
2015/01/20 职场文书
新员工入职感想
2015/08/07 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS