请老师帮忙查看一下为何控制台第二次输入会重复打印多次
来源：3-5 自由编程
南大街萨博四
2019-08-06 20:47:25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="dropdown fl" >
<a href="###" class="dropdown-toggle link transition ">我的慕淘<i class="dropdown-arrow"></i></a>
<ul class="dropdown-block dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="dropdown fl">
<a href="###" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow"></i></a>
<ul class="dropdown-block dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" class="nav-site-category link">商品分类</a>
</li>
<li class="dropdown fl" data-load="test/dropdown.json">
<a href="###" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow"></i></a>
<ul class="dropdown-block dropdown-left" >
<li class='dropdown-loading'></li>
<!-- <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li> -->
</ul>
</li>
<li class="nav-site-service dropdown fl">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow"></i></a>
<ul class="dropdown-block dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 站点导航结束 -->
<div class="header">
<div class="container">
<h1><a href="index.html" class="header-logo fl text-hidden">慕淘网</a></h1>
<div class="search fl" id='header-search'>
<form action="//s.taobao.com/search" class="search-form">
<input type="text" class="search-inputbox fl" placeholder="超值零食大礼包抢购">
<input type="submit" class="search-btn fl" value="搜索">
<ul class="search-layer">
<!-- <li class="search-layer-item">1</li>
<li class="search-layer-item">1</li>
<li class="search-layer-item">1</li> -->
</ul>
</form>
</div>
<div class="cart fr"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/transition.js"></script>
<script src="js/showhide3.js"></script>
<script src="js/dropdown2.js"></script>
<script src="js/search.js"></script>
<script src="js/index.js"></script>
</body>
</html>
search.js:
(function(){
var cache={
data:{},
count:0,
addData:function(key,data){
if(!this.data[key]){
this.data[key]=data;
this.count++;
}
},
readData:function(key){
return this.data[key];
},
deleteDataByKey:function(key){
delete this.data[key];
this.count--;
},
deleteDataByOrder:function(num){
var count=0;
for(var p in this.data){
if(count>=num){
break;
}
count++;
this.deleteDataByKey(p);
}
}
};
function Search($elem,options){
this.$elem=$elem;
this.options=options;
this.$input = this.$elem.find('.search-inputbox');
this.$layer = this.$elem.find('.search-layer');
this.$form=this.$elem.find('.search-form');
this.loaded = false;
this.$elem.on('click','.search-btn',$.proxy(this.submit,this));
if(this.options.autocomplete){
this.autocomplete();
}
}
Search.DEFAULTS={
autocomplete:true,
url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1565064740153_507&callback=jsonp508&k=1&area=c2c&bucketid=7&q=',
css3:false,
js:false,
animation:'fade',
getDataInterval:200
};
Search.prototype.submit=function(){
if(this.getInputVal()===''){
return false;
}
this.$form.submit();
};
Search.prototype.autocomplete=function(){
var timer = null,
self=this;
this.$input
.on('input',function(){
if(self.options.getDataInterval){
clearTimeout(timer);
timer=setTimeout(function(){
self.getData();
},self.options.getDataInterval);
}else{
self.getData();
}
})
.on('focus',$.proxy(this.showLayer,this))
.on('click',function(){
return false;
});
$(document).on('click',$.proxy(this.hideLayer,this));
this.$layer.showHide(this.options);
};
Search.prototype.getData=function(){
var self = this;
var inputVal = this.getInputVal();
if(inputVal==='')return self.$elem.trigger('search-noData',);
if(cache.readData(inputVal)) return self.$elem.trigger('search-getData',[cache.readData(inputVal)]);
if(this.jqXHR)this.jqXHR.abort();
this.jqXHR = $.ajax({
url: this.options.url + inputVal,
dataType: 'jsonp'
}).done(function(data) {
cache.addData(inputVal,data);
console.log(cache.data);
console.log(cache.count);
self.$elem.trigger('search-getData',[data]);
console.log(data);
}).fail(function() {
self.$elem.trigger('search-noData',);
}).always(function() {
self.jqXHR = null;
});
};
Search.prototype.showLayer=function(){
if(!this.loaded)return;
this.$layer.showHide('show');
};
Search.prototype.hideLayer=function(){
this.$layer.showHide('hide');
};
Search.prototype.getInputVal=function(){
return $.trim(this.$input.val());
};
Search.prototype.setInputVal=function(val){
this.$input.val(removeHtmlTags(val));
};
Search.prototype.appendLayer=function(html){
this.$layer.html(html);
this.loaded = !!html;
};
function removeHtmlTags(str){
return str.replace(/<(?:[^>"']|"[^"]*"|'[^']*')*>/g,'');
};
$.fn.extend({
search:function(option,value){
return this.each(function(){
var $this=$(this);
var search=$this.data('dropdown');
var options=$.extend({},Search.DEFAULTS,$this.data(),typeof option==='object'&&option);
if(!search){
$this.data('search',search=new Search($this,options));
}
//如果这里是判断‘sting’用户在输入的时候如果不是show或者hide就会报错
//判断是‘function’时 输入错了 程序执行未定义的函数，不会报错，从而提高容错率
if(typeof search[option]==='function'){
search[option](value);
}
});
}
});
})();
index.js代码：
(function(){
/*dropdown*/
$('.dropdown').dropdown({
event:'click0',
css3:true,
js:true,
animation:'fade',
active:'menu'
});
$('.dropdown').on('dropdown-show',function(e){
var $this=$(this);
var dataLoad=$this.data('load');
if(!dataLoad)return;
if(!$this.data('loaded')){
var html='';
var $block=$this.find('.dropdown-block');
$.getJSON(dataLoad,function(data){
setTimeout(function(){
for(var i=0;i<data.length;i++){
html+='<li><a href="'+data[i].url+'" target="_blank" class="menu-item">'+data[i].name+'</a></li>';
}
$block.data('loaded',true);
$block.html(html);
},1000);
});
}
});
/*header search*/
var $headerSearch = $('#header-search');
var html = '',
maxNum=10;
/*search.js中的事件绑定*/
$headerSearch.on('search-getData',function(e,data){
var $this=$(this);
html = createHeaderSearchLayer(data,maxNum);
$this.search('appendLayer',html);
/*$layer.html(html);*/
//如果html存在执行showLayer函数
if(html){
$this.search('showLayer');
}else{
$this.search('hideLayer');
}
}).on('search-noData',function(e){
$(this).search('hideLayer').search('appendLayer',html);
/*$layer.html('');*/
}).on('click','.search-layer-item',function(){
$headerSearch.search('setInputVal',$(this).html());
$headerSearch.search('submit',$(this).html());
});
$headerSearch.search({
autocomplete:true,
url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1565064740153_507&callback=jsonp508&k=1&area=c2c&bucketid=7&q=',
css3:false,
js:false,
animation:'fade',
/*getDataInterval:0*/
});
//声明搜索框下拉框标签函数
function createHeaderSearchLayer(data,maxNum){
var html='',
dataNum=data.result.length;
if(dataNum===0){
return '';
}
for(var i=0;i<dataNum;i++){
if(i>maxNum){
break;
}
html+='<li class="search-layer-item text-ellipsis">'+data.result[i][0]+'</li>';
}
return html;
}
})()
输入一个字符时控制台打印正常，当输入第二个是不知为何出现了多组相同值 请老师查看一下
console.log(cache.data);打印储存的数据对象
console.log(cache.count);打印储存的数据数量
console.log(data)打印服务端发送的数据
1回答
-
下列代码写错啦
修改之后的显示效果如下：
就不会出现打印多次的问题了
希望可以帮到你，如有疑问可再次提问，祝学习愉快！
0
相似问题
回答 7
回答 2