vue 2.0 使用jsonp实现淘宝接口的下拉菜单和搜索

HTML代码：

	
	
	
	


	

		←
		
		→
		

			

				{{value}}
			
		
		
		
请输入搜索内容
	
	
	
	

JS部分：

var search_moduel = new Vue({
		el:'.search_moduel',
		data:{
			myData:[],
			search1:'',
			now:-1
		},
		methods:{
			search:function(e){
				if(e.keyCode==13){
					window.open('https://s.taobao.com/search?q='+this.search1);
				} 
                this.$http.jsonp("https://suggest.taobao.com/sug",{  
                    params:{  
                        q:this.search1 //搜索值等于输入的值 
                    }  
                }).then(resp=>{
                	//当搜索框里没有值时，清空this.myData的值
                	if(this.search1==''){
                		this.myData='';
                	}else{
                		var obj = []; //定义一个新数组
                		for(var i=0;i {  
                    console.log("发送失败"+response.status+","+response.statusText);  
                }).catch();          
			},
			//按下键，并且搜索框随时更新值
			changeDown:function(){
				this.now++;
				if(this.now==this.myData.length){
					this.now=0;
				}
				this.search1=this.myData[this.now];
			},
			//按上键，并且搜索框随时更新值
			changeUp:function(){
				this.now--;
				if(this.now==-2){
					this.now=this.myData.length-1;
				}
				this.search1=this.myData[this.now];
			},
			//点击搜索按钮，跳转至搜索结果页
			sure_search:function(){
				window.open('https://s.taobao.com/search?q='+this.search1);
			},
			back:function(){
				window.history.back();
			}
		}
	});

附上淘宝的两个接口：

1、搜索提示接口：https://suggest.taobao.com/sug 它使用的是q关键字搜索，也就是说我们输入的值要赋给q

2、搜索结果接口：https://s.taobao.com/search?q=a 其中这个q值时随意的，代码里面有对其的应用。

再说一下，淘宝麻烦的地方的在于它和好搜和百度都不一样，它res.data.result得到的值是一个二维数组，这需要我们把它提取出来，然后转换为一个新的一维数组。