为什么我输入搜索内容后，下拉框不出现，还有一个报错
来源：2-2 为搜索框添加功能--获取数据和生成下拉层结构
慕后端5428016
2019-12-17 11:07:26
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>慕淘网</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="javascript:;" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer 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="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer 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="###" target="_blank" class="nav-site-category link transition">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer 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 menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer 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 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
<div class="search fl">
<form action="https://s.taobao.com/search">
<input type="text" name="q" placeholder="一元抢"
autocomplete="off" class="search-inputbox fl">
<input type="submit" value="搜索" class="search-btn fl">
</form>
<ul class="search-layer">
<!--<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">111</li> -->
</ul>
</div>
<div class="cart fr"></div>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-3.4.1.js"><\/script>');
</script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/showHide.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
/*公共样式*/
.container{
width: 1200px;
margin: 0 auto;
}
.link{
color: #4d555d;
}
.link:hover{
color: #f01414;
}
.transition{
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.text-ellipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.text-hidden{
text-indent: -999999px;
overflow: hidden;
}
/*icon*/
@font-face {font-family: "iconfont";
src: url('font/iconfont.eot?t=1575798728664'); /* IE9 */
src: url('font/iconfont.eot?t=1575798728664#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABkQAAAJHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApIXwE2AiQDCAsGAAQgBYRtBzYbiwXInpo8KVKFMDYISHAQESAevvZ7PXffhgAkogZU0VEZH0kKyEbITG19bYXO+KIRf//XNG3HRuX5sqwakRrbD/lwx7mMnp9wZOSU6E5NsjCTa83UZXT1he8T907/BApkPqAc96KxJk3qAuriQAp0rEGRlVDGDWMXvMDjBKr16+vs7R6fwYrMHheIq+gVrBR8ssySlUJ5w9Is3pWpTA/pDXiLvh//TWOFpKxglx1e7lhY/9XgpBU3pRsXAcFPQKvLUGAWyMRpY2xfTzBOT3VswTA4VnHwq6FUCqziqCbB/jq7sBb0QvEzSTzpoyYTPFZPzUDnpJuJZuOeb789tZF/efq8abWPj+2/3y8u2hFH5ov2yI8Rhtvzi/lo1tHPivt0BR0EXx/vNaz9V9Zk8NX8z8iYDXOAyn3Yg38hGdiUDZltSVmTNLYnzeeoqFaNEuxq9j1V33biVKjUNsFRoS9DodIomdlZlKkxh3KVNlFtxt7qGi1YT+QqTHsACI1ekdT7gUKjlszsF8q0+0O5xuih2nm0bFljPOLaLpMSsqjvMZqycK5N1uLiE/LXmeK8LOJeEDcxiJPhuJzco4J4iRnNjZ+KOHRc5rgLTqMsK7HiMiEjwyBSzUYj1/SmoSlzWLOLEUUQC2n3UGSUCi7oLNYqnz9BvGsZhTsa6qIXCGvE/tHE0HgAuacuBjU8yiuNG96UEA5yWCmHdsEgksmUUNU8KEEMMRQmRCozI6eVG6oebq/N/24XVLMNKZzyQu11VJlK/KxCymsAAAAA') format('woff2'),
url('font/iconfont.woff?t=1575798728664') format('woff'),
url('font/iconfont.ttf?t=1575798728664') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('font/iconfont.svg?t=1575798728664#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-xialajiantou:before {
content: "\e60f";
}
/*showHide*/
.fadeOut{
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*dropdown*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2
}
.dropdown-arrow{
display: inline-block;
line-height: 1;
vertical-align: middle;
}
.dropdown-layer{
z-index: 1;
display: none;
position: absolute;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left:auto;
}
[class*="-active"] .dropdown-arrow{
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.dropdown-loading{
width: 32px;
height: 32px;
background: url(../img/loading.gif)no-repeat;
margin: 20px;
}
/*menu dropdown*/
.menu .dropdown-toggle{
display: block;
height: 100%;
padding: 0 13px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.menu .dropdown-arrow{
margin-left: 5px;
}
.menu .dropdown-layer{
top: 43px;
background: #fff;
border:1px solid #cdd0d4;
}
.menu-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.menu-item:hover{
background: #f3f5f7;
}
.menu-active .dropdown-toggle{
background-color:#fff;
border-color: #cdd0d4;
}
/*search*/
.search{
position: relative;
border:1px solid #cfd2d5;
}
.search-inputbox{
width: 605px;
height: 40px;
line-height: 40px;
padding: 0 10px;
border:none;
background-color: #fff;
}
.search-btn{
width: 73px;
height: 40px;
line-height: 40px;
background-color:#07111b;
border:none;
font-size: 14px;
color: #fff;
text-align: center;
cursor: pointer;
}
.search-layer{
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border:1px solid #cfd2d5;
}
.search-layer-item{
height: 24px;
line-height: 24px;
cursor: pointer;
padding: 0 10px;
}
.search-layer-item:hover{
background-color: #f3f5f7;
}
/*nav-site*/
.nav-site{
width: 100%;
background: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border:1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
margin-left: 15px;
}
.nav-site-mobile,
.nav-site-signup{
margin-left: 10px;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/*header*/
.header{
width: 100%;
height: 124px;
background: #f3f5f7;
}
.header .cart,
.header .search,
.header-logo{
margin-top:36px;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
background: url(../img/header-logo.png)no-repeat;
margin-left: 15px;
}
.header .search{
margin-left: 145px;
}
/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
(function(){
var transitionEndEventName={
transition:'transitionend',
MozTransition:'transitionend',
WebkitTransition:'webkittransitionend',
OTransition:'oTransitionend otransitionend'
};
var transitionEnd='',
isSupport=false;
for(var name in transitionEndEventName){
if (document.body.style[name]!==undefined){
transitionEnd=transitionEndEventName[name];
isSupport=true;
break;
}
}
window.mt=window.mt || {};
window.mt.transition={
end:transitionEnd,
isSupport:isSupport
}
})()
(function($) {
'use strict';
var transition = window.mt.transition;
function init($elem, hiddenCallback) {
if ($elem.is(':hidden')) { //hidden
$elem.data('status', 'hidden');
if (typeof hiddenCallback === 'function') hiddenCallback();
//$elem.addClass('fadeOut');
} else { //shown
$elem.data('status', 'shown');
}
}
function show($elem, callback) {
if ($elem.data('status') === 'show') return;
if ($elem.data('status') === 'shown') return;
$elem.data('status', 'show').trigger('show');
callback();
}
function hide($elem, callback) {
if ($elem.data('status') === 'hide') return;
if ($elem.data('status') === 'hidden') return;
$elem.data('status', 'hide').trigger('hide');
callback();
}
var silent = {
init: init,
show: function($elem) {
show($elem, function() {
$elem.show();
$elem.data('status', 'shown').trigger('shown');
})
},
hide: function($elem) {
hide($elem, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
})
}
};
var css3 = {
fade: {
init: function($elem) {
css3._init($elem, 'fadeOut');
},
show: function($elem) {
css3._show($elem, 'fadeOut');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut');
}
},
slideUpDown: {
init: function($elem) {
$elem.height($elem.height());
css3._init($elem, 'slideUpDownCollapse');
},
show: function($elem) {
css3._show($elem, 'slideUpDownCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideUpDownCollapse');
}
},
sildeLeftRight: {
init: function($elem) {
css3._init($elem, 'slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'slideLeftRightCollapse');
}
},
fadeSildeUpDown: {
init: function($elem) {
$elem.height($elem.height());
css3._init($elem, 'fadeOut slideUpDownCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideUpDownCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideUpDownCollapse');
}
},
fadeSildeLeftRight: {
init: function($elem) {
css3._init($elem, 'fadeOut slideLeftRightCollapse');
},
show: function($elem) {
css3._show($elem, 'fadeOut slideLeftRightCollapse');
},
hide: function($elem) {
css3._hide($elem, 'fadeOut slideLeftRightCollapse');
}
}
};
css3._init = function($elem, className) {
$elem.addClass('transition');
init($elem, function() {
$elem.addClass(className);
});
};
css3._show = function($elem, className) {
show($elem, function() {
$elem.off(transition.end).one(transition.end, function() {
$elem.data('status', 'shown').trigger('shown');
});
$elem.show();
setTimeout(function() {
$elem.removeClass(className);
}, 20);
});
};
css3._hide = function($elem, className) {
hide($elem, function() {
$elem.off(transition.end).one(transition.end, function() {
$elem.hide();
$elem.data('status', 'hidden').trigger('hidden');
});
$elem.addClass(className);
})
}
var js = {
fade: {
init: function($elem) {
js._init($elem);
},
show: function($elem) {
js._show($elem, 'fadeIn');
},
hide: function($elem) {
js._hide($elem, 'fadeOut');
}
},
slideUpDown: {
init: function($elem) {
js._init($elem);
},
show: function($elem) {
js._show($elem, 'slideDown');
},
hide: function($elem) {
js._hide($elem, 'slideUp');
}
},
slideLeftRight: {
init: function($elem) {
js._customInit($elem, {
'width': 0,
'padding-left': 0,
'padding-right': 0
})
},
show: function($elem) {
js._customShow($elem);
},
hide: function($elem) {
js._customHide($elem, {
'width': 0,
'padding-left': 0,
'padding-right': 0
});
}
},
fadeSildeUpDown: {
init: function($elem) {
js._customInit($elem, {
'opacity': 0,
'height': 0,
'padding-top': 0,
'padding-bottom': 0
});
},
show: function($elem) {
js._customShow($elem)
},
hide: function($elem) {
js._customHide($elem, {
'opacity': 0,
'height': 0,
'padding-top': 0,
'padding-bottom': 0
});
}
},
fadeSildeLeftRight: {
init: function($elem) {
js._customInit($elem, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
})
},
show: function($elem) {
js._customShow($elem)
},
hide: function($elem) {
js._customHide($elem, {
'opacity': 0,
'width': 0,
'padding-left': 0,
'padding-right': 0
});
}
}
};
js._init = function($elem, hiddenCallback) {
$elem.removeClass('transition');
init($elem, hiddenCallback);
};
js._customInit = function($elem, options) {
var styles = {};
for (var p in options) {
styles[p] = $elem.css(p);
}
$elem.data('styles', styles);
js._init($elem, function() {
$elem.css(options);
});
};
js._show = function($elem, mode) {
show($elem, function() {
$elem.stop()[mode](function() {
$elem.data('status', 'shown').trigger('shown')
});
});
};
js._customShow = function($elem) {
show($elem, function() {
$elem.show();
$elem.stop().animate($elem.data('styles'), function() {
$elem.data('status', 'shown').trigger('shown');
});
});
};
js._hide = function($elem, mode) {
hide($elem, function() {
$elem.stop()[mode](function() {
$elem.data('status', 'hidden').trigger('hidden')
});
});
};
js._customHide = function($elem, options) {
hide($elem, function() {
$elem.stop().animate(options, function() {
$elem.hide()
$elem.data('status', 'hidden').trigger('hidden');
});
});
};
var defaults = {
css3: false,
js: false,
animation: 'fade'
};
function showHide($elem, options) {
var mode = null;
if (options.css3 && transition.isSupport) { //css3 transition
mode = css3[options.animation] || css3[defaults.animation];
} else if (options.js) { //js animation
mode = js[options.animation] || js[defaults.animation];
} else { //no animation
mode = silent;
}
mode.init($elem);
return {
show:$.proxy(mode.show,this,$elem),
hide:$.proxy(mode.hide,this,$elem)
};
}
//window.mt=window.mt || {};
//window.mt.showHide=showHide;
$.fn.extend({
showHide:function(option){
return this.each(function(){
var $this=$(this),
options = $.extend({}, defaults, typeof option==='object' && option),
mode=$this.data('showHide');
if(!mode){
$this.data('showHide',mode=showHide($this,options));
}
if (typeof mode[option]==='function') {
mode[option]();
}
});
}
});
})(jQuery);
(function($) {
'use strict';
function Dropdown($elem, options) {
this.$elem = $elem;
this.options = options;
this.$layer = this.$elem.find('.dropdown-layer');
this.activeClass = options.active + '-active';
this._init();
}
Dropdown.DEFAULTS = {
event: 'hover',
css3: false,
js: false,
animation: 'fade',
delay: 0,
active: 'dropdown'
};
Dropdown.prototype._init = function() {
var self = this;
this.$layer.showHide(this.options);
this.$layer.on('show shown hide hidden', function(e) {
self.$elem.trigger('dropdown-' + e.type);
});
if (this.options.event === 'click') {
this.$elem.on('click', function(e) {
self.show();
e.stopPropagation(); //阻止事件冒泡。
});
$(document).on('click', $.proxy(this.hide, this));
} else {
this.$elem.hover($.proxy(this.show, this), $.proxy(this.hide, this));
}
};
Dropdown.prototype.show = function() {
var self = this;
if (this.options.delay) {
this.timer = setTimeout(function() {
_show();
}, this.options.delay);
} else {
_show();
}
function _show() {
self.$elem.addClass(self.activeClass);
self.$layer.showHide('show');
}
};
Dropdown.prototype.hide = function() {
if (this.options.delay) {
clearTimeout(this.timer);
}
this.$elem.removeClass(this.activeClass);
this.$layer.showHide('hide');
};
$.fn.extend({
dropdown: function(option) {
return this.each(function() {
var $this=$(this);
var dropdown =$this.data('dropdown');
var options = $.extend({}, Dropdown.DEFAULTS, $this.data(), typeof option === 'object' && option);
if (!dropdown) {
$this.data('dropdown', dropdown = new Dropdown($this, options))
}
var dropdown = new Dropdown($this, options);
if (typeof dropdown[option] === 'function') {
dropdown[option]();
}
})
}
})
})(jQuery);
(function($){
'use strict';
var $search=$('.search'),
$input=$search.find('.search-inputbox'),
$btn=$search.find('.search-btn'),
$layer=$search.find('.search-layer');
//验证
$btn.on('click',function(){
if ($.trim($input.val())==="") {
return false;
}
})
//自动完成
$input.on('input',function(){
var url='https://suggest.taobao.com/sug?code=utf-8&q=iphone11&_ksTS=1576487058494_967&callback=jsonp968&k=1&area=c2c&bucketid=9&q='+ encodeURIComponent($.trim($input.val()));
$.ajax({
url:url,
timeout:1,
dataType:'jsonp'
}).done(function(data){
console.log(data);
var html='',
maxNum=10;
for(var i=0;i<data['result'].length;i++){
if (i>=maxNum) break;
html+='<li class="search-layer-item text-ellipsis">'+data['result'][i][0]+'</li>'
}
$layer.html(html).show();
}).fail(function(){
$layer.hide().html('');
}).always(function(){
console.log('why always me');
});
});
})(jQuery);
(function($) {
'use strict';
$('.dropdown').on('dropdown-show', function(e) {
var $this = $(this),
dataLoad = $this.data('load');
if (!dataLoad) return;
if (!$this.data('loaded')) {
var $layer = $(this).find('.dropdown-layer'),
html = '';
$.getJSON(dataLoad, function(data) {
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>'
}
$layer.html(html);
$this.data('loaded', true);
});
}
});
$('.dropdown').dropdown({
css3: true,
js: false,
});
})(jQuery)
1回答
-
好帮手慕夭夭
2019-12-17
同学你好，因为设置的超时太短了，此时Jsonp的回调函数还没创建，所以会报错。如下修改：
1000毫秒才是1秒，同学设置了1毫秒，接近于0秒，太短了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 2
回答 2