为什么清除空格还是能提交，不知道哪里错了。。
来源：3-1 改写搜索框功能--搜索验证
saill
2019-07-10 19:08:13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.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="menu dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="transition dropdown-arrow icon "></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="transition dropdown-arrow icon "></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="transition dropdown-arrow icon "></i></a> <ul class="dropdown-layer dropdown-left"> <li class="dropdown-loading"></li> <!-- <li><a href="###" target="_blank" class="dropdown-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="menu nav-site-service dropdown fl" data-active="menu"> <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="transition dropdown-arrow icon "></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 " id="header-search"> <form action="https://s.taobao.com/search" class="search-form"> <input type="text" class="search-input-box fl" name="q" placeholder="裂痕美食亿元抢" autocomplete="off"> <input type="submit" class="search-input-btn fl" value="搜索" > </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 src="js/jquery.js"></script> <script src="js/transition.js"></script> <script src="js/showHide.js"></script> <script src="js/dropdown.js"></script> <script src="js/search.js"></script> <script src="js/index.js"></script> </body> </html>
这是index.js
(function($){
$('.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) {
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>'
}
$layer.html(html);
$this.data('loaded', true);
}, 1000);
});
}
});
$('.dropdown').dropdown({
css3:true,
js:false
});
var $headerSearch = $('#header-search');
$headerSearch.search({
autocomplete: true,
css3: false,
js: false,
animation: 'fade'
});
})(jQuery);这是search.js
(function ($) {
'use strict';
function Search($elem, options) {
this.$elem = $elem;
this.$options = $(options);
this.$input = $elem.find('.search-input-box');
this.$layer = $elem.find('.search-layer');
this.$form = $elem.find('.search-form');
this.$elem.on('click', '.search-btn', $.proxy(this.submit, this));
}
Search.DEFAULTS = {
autocomplete: false,
url: 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1562746063668_830&callback=jsonp831&k=1&area=c2c&bucketid=17&q=',
css3: false,
js: false,
animation: 'fade'
}
Search.prototype.submit = function () {
if ($.trim(this.$input.val()) === '') {
return false;
}
this.$form.submit();
};
Search.prototype.autocomplete = function () {
};
Search.prototype.getData = function () {
};
Search.prototype.showLayer = function () {
};
Search.prototype.hideLayer = function () {
};
$.fn.extend({
search: function (option) {
return this.each(function () {
var $this = $(this);
var search = $this.data('search');
var options = $.extend({}, Search.DEFAULTS, $this.data(), typeof option === 'object' && option);
if (!search) {
$this.data('search', search = new Search($this, options));
}
if (typeof search[option] === 'function') {
search[option]();
}
})
}
});
})(jQuery);其它JS应该不需要吧，就没传。
写回答
3回答
-
同学你好！
很棒哦，可以自己找到问题并解决。继续加油如果帮助到了你 欢迎采纳 祝学习愉快~
0 -
saill
提问者
2019-07-10
找到问题了。。事件委托那里class名写错了，导致没委托到。
0 -
saill
提问者
2019-07-10
视频最后那里加了this.，还是可以提交。
0
相似问题