老师，为什么我还是能跳转到淘宝页面
来源：3-1 改写搜索框功能--搜索验证
天青色烟雨蒙
2019-08-23 20:52:26
<!DOCTYPE html>
<html lang="zh-CN">
<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="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">商品分类</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>
<!-- 站点导航结束 -->
<!-- header区开始 -->
<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden">慕课网</a></h1>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<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 dropdown fr"></div>
</div>
</div>
<!-- <script src="js/jquery.js"></script> 引用本地jquery.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cdn引用方法-->
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</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>search.js
(function ($) {
'use strict';
function Search($elem,options){
this.$elem=$elem;
this.options=options;
this.$input = this.$elem.find('.search-inputbox');
this.$form = this.$elem.find('.search-form');
this.$layer = this.$elem.find('.search-layer');
this.$elem.on('click','.search-btn',$proxy(this.submit,this));
}
Search.DEFAULTS={
autocomplete:false,
url: 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=',
css3:false,
js:false,
animation:'fade'
};
Search.prototype.submit=function(){
if ($.trim(this.$input.val()) === '') {
return false;
}
};
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),
search=$this.data('search'),
options = $.extend({}, Search.DEFAULTS, $(this).data(), typeof option==='object'&&option);
if(!search){//解决多次调用dropdown问题
$this.data('search',search=new Search($this,options));
}
if(typeof search[option]==='function'){
search[option]();
}
});
}
});
})(jQuery);
//(function () {
// 'use strict';
//
// var $search = $('.search'),
// $input = $search.find('.search-inputbox'),
// $form = $search.find('.search-form'),
// $btn = $search.find('.search-btn'),
// $layer = $search.find('.search-layer');
//
// // 验证
// $form.on('submit', function() {
// if ($.trim($input.val()) === '') {
// return false;
// }
// });
//
// //自动完成
// $input.on('input', function () {
// var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291' +
// '&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim($input.val()));
// $.ajax({
// url: url,
// dataType: 'jsonp'
// }).done(function (data) {
// console.log(data);
// var html = '',
// dataNum = data['result'].length,
// maxNum = 10;
// if(dataNum === 0){
// $layer.hide().html('');
// 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>';
// }
// $layer.html(html).show();
//
// }).fail(function () {
// $layer.hide().html('');
// }).always(function () {
// console.log('why always me!');
// });
// });
//
// $layer.on('click','.search-layer-item',function(){
// $input.val(removeHtmlTags($(this).html()));
// $form.submit();
// });
//
// $layer.on('focus',function(){
// $layer.show();
// }).on('click',function(e){
// return false;
// });
// $(document).on('click',function(){
// $layer.hide();
// });
//
// function removeHtmlTags(str){
// return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, '');
// }
//
//})(jQuery);index.js
(function($) {
//menu
$(".dropdown").dropdown({
css3: true,
js: false
});
$('.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) {
// console.log(1);
// 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);
});
}
});
//header-search
var $headerSearch=$('#header-search');
$headerSearch.search({
autocomplete: true,
css3: false,
js: false,
animation: 'fade'
});
})(jQuery);写回答
2回答
-
樱桃小胖子
2019-08-24
能够自己发现问题并解决，棒棒哒，也欢迎小伙伴儿将自己的解决方案在该问题下进行分享，也方便帮助其他小伙伴在遇到同类问题时，能够参考
祝学习愉快！
0 -
天青色烟雨蒙
提问者
2019-08-23
老师，我已经知道是什么问题了
0
相似问题