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 相关文章推荐
JS分割字符串并放入数组的函数
Jul 04 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
项目资料员岗位职责
2013/12/10 职场文书
关于逃课的检讨书
2014/01/23 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
公司总经理岗位职责
2015/04/01 职场文书
丧事主持词
2015/07/02 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
Python3 类型标注支持操作
2021/06/02 Python