vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法
2.this.$http.post()方法
3.this.$http.jsonp()方法
(vue仿百度搜索)
在输入框中输入a, 然后在百度f12 ==> network ==> 复制js https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1440_25548_21098_20719&req=2&csor=1&cb=jQuery1102032174500415831986_1516022014624&_=1516022014630
整理下
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
HTML
<div id="app">
<!-- v-model绑定数据, @keyup事件 -->
<input type="text" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<!-- v-for循环数据, v-bind:class="{gray:index==now}, 当前下标为true时显示灰色" -->
<li v-for="(value, index) in myData" v-bind:class="{gray:index==now}">{{value}}</li>
</ul>
<!-- 判断length当数据为空时 -->
<p v-show="myData.length==0">暂无数据...</p>
</div>
VUE.JS
new Vue({
el: "#app",
data: {
myData:[], // 循环数据
keyword:"", // 输入文本值
now: -1 // 索引
}, methods:{
// jshow({q:"a",p:false,s:["爱奇艺","阿里云","阿里巴巴","安居客","阿里巴巴批发网","爱情公寓","安卓模拟器","acfun","apple","暗黑3"]});
get: function(ev){
if(ev.keyCode == 38 || ev.keyCode == 40){
return false;
}
if(ev.keyCode == 13){
window.open("https://www.baidu.com/s?wd=" + this.keyword);
}
// jsonp获取百度的搜索关键字
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.keyword + "",{
jsonp:"cb" // callback函数名
}).then(function(res){
this.myData = res.data.s; // 存入搜索数据
}, function(){
console.log(res.status)
})
},
// 键盘下拉事件
changeDown: function(){
this.now++;
if(this.now == this.myData.length){
this.now = -1;
}
this.keyword = this.myData[this.now]; // 赋值是文本框
}, // 键盘上拉事件
changeUp: function(){
this.now--;
if(this.now == -1){
this.now = this.myData.length-1;
}
this.keyword = this.myData[this.now]; // 赋值是文本框
},
}
})
vue-resource使用 (vue仿百度搜索)的更多相关文章
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- 仿百度搜索(AJAX)
<h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...
- js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
- jquery 仿百度搜索下拉框的插件
转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...
- 使用Jquery UI 高仿百度搜索下拉列表功能
最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以 ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 15行Python 仿百度搜索引擎
开发工具:PyCharm 开发环境:python3.6 + flask + requests 开发流程: 1. 启动一个web服务 from flask import Flask app = Flas ...
- Vue调用百度接口做百度搜索
这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...
随机推荐
- 史上最全的 Sublime Text 汉化、插件安装合集
0.前言 本文用于给新手小白用户指明前进方向.不用做商业推广. 其次,鼓舞购买正版.拒绝盗版. 好了.口号喊完,接下来就直接開始正文. 1. Sublime Text 介绍 首先在開始前,先来介绍一下 ...
- Python学习(五)——列表操作全透析
列表是以类的形式实现的. "创建"列表实际上是将一个类实例化. 因此,列表有多种方法能够操作. Python列表操作的函数和方法 列表操作包括下面函数: 1.cmp(list1, ...
- 前端页面——Cookie与Session有什么差别
我们在实际生活中总会遇到这种事情,我们一旦登录(首次输入username和password)某个站点之后,当我们再次訪问的时候(仅仅要不关闭浏览器),无需再次登录.而当我们在这个站点浏览一段时间后,它 ...
- curl tutorial with examples of usage
原文:http://www.yilmazhuseyin.com/blog/dev/curl-tutorial-examples-usage/ 阮一峰的这个教程也不错:http://www.ruanyi ...
- TensorFlow安装,升级,基本操作
一. 安装 ubuntu 16 python 2.7 pip install tensorflow 测试安装完成效果: 查看tensorFlow版本python import tensorflow a ...
- 二维码解析:使用 JavaScript 库reqrcode.js解析二维码
上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...
- 改造phpcms-v9自带的字符串截取函数
1.phpcms-v9自带的字符串截取函数在phpcms/libs/functions/global.func.php文件中: /** * 字符截取 支持UTF8/GBK * @param $stri ...
- Eclipse------导入项目后出现javax.servlet.jsp cannot be resolved to a type
报错信息:javax.servlet.jsp cannot be resolved to a type 原因1: 这个错误可能是服务器自带的servlet库未导入的原因. 解决方法: 右键项目&quo ...
- zabbix添加Tomcat监控
参靠了网上一些关于zabbix添加Tomcat的监控配置,自己整理了下: 一.服务器端配置1.找到zabbix源码存放路径 # find / -name zabbix_java #/usr/local ...
- 【ArcGIS】WebAdaptorIIS 安装前准备及配置Portal For ArcGIS的问题解决
1.计算机全名配置 2.IIS-服务器证书配置 3.端口绑定 备注:配置Portal For ArcGIS总会提示计算机域名.全名错误.完全限定域名,可能就是没有进行第一步操作 4.Portal目录