3回答

好帮手慕星星

2018-10-23

已采纳

可以在keyup的事件中先清除一下内容：

自己测试一下。

0

是否可以坚持走得更远些

提问者

2018-10-23

$(function(){

	var searchBtn = $('.header-search').find('button');
	var input = $('.header-search-input');
	
	input.on('keyup',function(){
		var searchVal = $('.header-search-input').val();
		searchAjax(searchVal);
	});

	searchBtn.on('click',function(){
		var searchVal = $('.header-search-input').val();
		commodityAjax(searchVal);
	})


	//商品数据列表
	function commodityAjax(searchVal){
		$.ajax({
			url : 'basketballShoes.json',
			type : 'GET',
			dataType : 'json',
			success : function(data){
				var template = $('#basketBallShoes').html();//模板
				var commodityContainer = $('.commodityContainer');
				commodityContainer.html('');//先清空数据列表

				for(var i=0;i<data.length;i++){
					if(searchVal === data[i][0]["Query"]){
						console.log(data[i][0]["Query"]);
						var result = data[i][0]["Results"][0]["Suggests"];
						console.log(result);
						for(var j=0;j<result.length;j++){
							var obj = {
							'each Suggests as value i': '',
							'/each' : '',
							'value.Txt' : result[j].Txt,
							'value.num' : result[j].num,
							'value.max' : result[j].max,
							'value.discount' : result[j].discount,
							'value.label' : result[j].label,
							'value.shop' : result[j].shop,
							'value.image' : result[j].image,
							'value.color' : result[j].color,
							'value.size' : result[j].size,
							'value.nonDiscount' : result[j].nonDiscount
							}
							console.log(obj);
							var html = template;
							for(var k in obj){

								// html = html.replace('{{'+k+'}}',obj[k]);

								var reg = new RegExp("\{\{" + k + "\}\}", 'g');
               					html = html.replace(reg, obj[k]);	
							}
							commodityContainer.append(html);
						}
						
						$('.list').html('');//清除搜索框的下拉列表
					}
				}

			}
		})
	}



	//搜索框下拉列表
	function searchAjax(searchVal){
		$.ajax({
			type:'GET',
			url:'search.json',
			dataType:'json',
			success:function(data){

				//方法一:如数据过多则不适用
				// var result = data[0][0]['Results'][0]['Suggests'];
				// var result1 = data[1][0]['Results'][0]['Suggests'];
				// var ul = document.createElement('ul');
				// $('.list').css({position : 'absolute',top : '33px'});
				// $('.list').show();

				// if(searchVal === '鞋'){
				// 	$.each(result,function(index,text){
				// 		var li = document.createElement('li');
				// 		var txt = document.createTextNode(text['Txt']);
				// 		li.appendChild(txt);
				// 		ul.appendChild(li);
				// 	})
					
				// 	$('.list').html(ul);
					
				// }else if(searchVal === '音速3'){
				// 		$.each(result1,function(index,text){
				// 		var li = document.createElement('li');
				// 		var txt = document.createTextNode(text['Txt']);
				// 		li.appendChild(txt);
				// 		ul.appendChild(li);
				// 	})
					
				// 	$('.list').html(ul);
					
				// }else{
				// 	$('.list').html(''); //如不符合则清空
				// }



				// 方法二：
				for(var i = 0;i<data.length;i++){	
					if(searchVal === data[i][0]['Query']){
						console.log(data[i][0]['Query']);
						$('.list').show();
						$('.list').css({position : 'absolute',top : '33px'});//设置绝对定位，否则会把下面的内容挤下去
						var ul = document.createElement('ul');
						$.each(data[i][0]['Results'][0]['Suggests'],function(i,text){
							var li = document.createElement('li');
							var txt = document.createTextNode(text['Txt']);
							li.appendChild(txt);
							ul.appendChild(li);
							$('.list').html(ul);
						})
					}
					// else{
					// 	console.log(1);
					// 	$('.list').html(''); //不符合条件则清空
					// }

				}
				
			}

		});	
	}

})

老师，这样还是无法实现我想要的呀，看上图，当搜索框没有内容了的时候，这个下拉列表的信息还是显示出来了，我是想当内容不匹配的时候就不让它显示出来。如果我在代码的126-129里写上else语句的话，虽然可以实现，但是也会出现你上个回答的那样，当输入是‘鞋’的时候，下拉列表的内容就显示不出来了。请问这个该怎么实现？

0

好帮手慕星星

2018-10-23

如果在判断前面先使用each方法就会将data中的所有数据都循环，直到数据中的最后一个内容，当输入‘鞋’的时候，开始判断的是鞋，是匹配的内容，但是会继续向下循环，最后一个是‘音速3’与‘鞋’不匹配，所以没有内容展示出来。当输入‘音速3’的时候，循环到最后一个是‘音速3’，内容匹配就会展示出内容。

建议可以使用for循环来完成，参考：

自己可以测试一下，祝学习愉快！

0