体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

提交会报错

来源：3-2 改写搜索框功能--自动完成

CC陈十一

2019-04-23 10:46:37

//search.js

(function($){
	'use strict';

	function Search($elem,options){
		this.$elem=$elem;
		this.$options=options;

		this.$form=this.$elem.find('.form-search');
		this.$input=this.$elem.find('.search-inputbox');
		this.$layer=this.$elem.find('.search-layer');
		this.$elem.on('click','.search-btn',$.proxy(this.submit,this));
		if(this.$options.autocomplete){
			this.autocomplete();
		}
	};
	Search.DEFAULTS={
		autocomplete:false,
		url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1555933233907_926&callback=jsonp927&k=1&area=c2c&bucketid=10&q=',
		css3:false,
		js:false,
		animation:'fade'
	};
	Search.prototype.submit=function(){
		if($.trim(this.$input.val())===''){
			return false;
		}
		this.$form.sumbit();
	};
	Search.prototype.autocomplete=function(){
		this.$input
			.on('input',$.proxy(this.getData,this))
			.on('focus',$.proxy(this.showLayer,this))
			.on('click',function(){
				return false;
			});
		this.$layer.showHide(this.options);

		$(document).on('click',$.proxy(this.hideLayer,this));
	};
	Search.prototype.getData=function(){
 		var self=this;

		$.ajax({
			url:this.$options.url+$.trim(this.$input.val()),
			dataType:'jsonp'
		}).done(function(data){
			self.$elem.trigger('search-getData',[data,self.$layer]);
		}).fail(function(){
			self.$elem.trigger('search-noData',[self.$layer]);
		});
	};
	Search.prototype.showLayer=function(){
		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));
		function removeHtmlTags(str){
			return str.replace(/<(?:[^>'"]|"[^]*"|'[^']*')*>/g,'');
		}
	};


	 $.fn.extend({
        search: function(option,value) {
            return this.each(function() {
                
                var $this=$(this),
                search=$this.data('search'),
                options = $.extend({}, Search.DEFAULTS, $(this).data(), typeof option==='object'&&option);
                // search(this, options);  
                if(!search){//解决多次调用search问题
                    $this.data('search',search=new Search($this,options));

                }  

                if(typeof search[option]==='function'){
                    search[option](value);

                }

            });

        }
    });
})(jQuery);

//index.js

var $headersearch=$('#header-search');
var html='',
	maxNum=10;
$headersearch.on('search-getData',function(e,data,$layer){
	var $this=$(this);
	html=createHeaderSearchLayer(data,maxNum);
	$layer.html(html);
	if(html){
		$this.search('showLayer');
	}else{
		$this.search('hideLayer');
	}	
}).on('search-noData',function(e,$layer){
	$(this).search('hideLayer');
	$layer.html('');
}).on('click','.search-layer-item',function(){
	console.log('1');
		$headersearch.search('setInputVal',$(this).html());
		$headersearch.search('submit');
});
$headersearch.search({
		autocomplete:true,
		css3:true,
		js:false,
		animation:'fade'
});

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">'+data['result'][i][0]+'</li>';
	}
	return html;
}

点击下拉框的时候会报错而且只有输入框的文本会变化，无法自动提交，只能手动点击提交。手动点击提交虽然也会报错，但是仍然可以搜索，很奇怪

http://img.mukewang.com/climg/5cbe7bf9000181cf19180206.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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="wrap">
<ul class='fl'>
<li class='fl'><a href="#" class='nav-site-login'>亲，请登录</a></li>
<li class='fl'><a href="#" class='nav-site-signup link'>免费注册</a></li>
<li class='fl'><a href="#" class='nav-site-signup link'>手机逛慕多多</a></li>
</ul>
<ul class='fr'>
<li class='fl menu dropdown' data-active='menu'>
<a href="#" class='dropdown-toggle link transition'>我的慕多多<i class='dropdown-arrow icon icon-xialajiantouxiao'></i></a>
<ul class="dropdown-layer">
<li><a href="#" class='menu-item'>已买到的宝贝</a></li>
<li><a href="#" class='menu-item'>我的足迹</a></li>
</ul>
</li>
<li class='fl menu dropdown' data-active='menu'>
<a href="#" class='dropdown-toggle link transition'>收藏夹<i class='dropdown-arrow icon icon-04xialajiantou'></i></a>
<ul class="dropdown-layer">
<li><a href="#" class='menu-item'>收藏的宝贝</a></li>
<li><a href="#" class='menu-item'>收藏的店铺</a></li>
</ul>
</li>
<li class='fl nodropdown'><a href="#" class='commodity link'></a>商品分类</li>
<li class='fl menu dropdown' data-active='menu'>
<a href="#" class='dropdown-toggle link transition'>卖家中心<i class='dropdown-arrow icon icon-04xialajiantou'></i></a>
<ul class="dropdown-layer">
<li><a href="#" class='menu-item'>已卖出的宝贝</a></li>
<li><a href="#" class='menu-item'>出售中的宝贝</a></li>
<li><a href="#" class='menu-item'>卖家服务市场</a></li>
<li><a href="#" class='menu-item'>卖家培训中心</a></li>
<li><a href="#" class='menu-item'>体验中心</a></li>
</ul>
</li>
<li class='fl menu dropdown'>
<a href="#" class='dropdown-toggle link transition'>联系客服<i class='dropdown-arrow icon icon-04xialajiantou'></i></a>
<ul class="dropdown-layer">
<li><a href="#" class='menu-item'>消费者客服</a></li>
<li><a href="#" class='menu-item'>卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header" id='header-search'>
<div class="wrap">
<h1 class='fl'><a class="header-log "></a></h1>
<div class="search fl">
<form action="https://s.taobao.com/search" class='form-search'>
<input type="text" name='q' class='search-inputbox fl' placeholder="灵魂美食零元抢" autocomplete="off" />
<input type="submit" value='搜索' class='search-btn fl'/>
</form>
<ul class='search-layer text-ellipsis'>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src='http://code.jquery.com/jquery-3.3.1.min.js'></script>
<script type="text/javascript" src='js/transition.js'></script>
<script type="text/javascript" src='js/showHides.js'></script>
<script type="text/javascript" src='js/common.js'></script>
<script type="text/javascript" src='js/search.js'></script>
<!-- <script type="text/javascript" src='js/showhide.js'></script> -->
<script type="text/javascript" src='js/index.js'></script>
<script type="text/javascript">
</script>
</body>
</html>


写回答

2回答

好帮手慕星星

2019-04-23

已采纳

你好，其实看报错信息就可以看出来哦：

http://img.mukewang.com/climg/5cbebb190001ee7804750167.jpg

大意是难免的，但是自己不要失去信心哦，要相信自己。

继续加油~

0

好帮手慕星星

2019-04-23

同学你好，是因为submit单词写了，如下：

http://img.mukewang.com/climg/5cbeafcc0001ecf907270235.jpg

b和m位置不对，换一下就可以了。

因为按钮用的是submit类型的，点击默认就会提交，所以可以正常访问。

可以修改测试下，祝学习愉快！

0
hC陈十一
h 老师我是不是太粗心了。我检查了好几遍都没检查出来= =，我是不是完了，好多问题都是因为粗心造成的，然后自己还检查不出来┭┮﹏┭┮
h019-04-23
共1条回复

0 学习 · 14456 问题

查看课程

相似问题

我用淘宝时，输入框有自动提示信息，点提交也是会提交的

回答 2

阻止表单提交

回答 1

为什么清除空格还是能提交，不知道哪里错了。。

回答 3

老师，为什么我的点击下拉框内容不会自动提交，需要手动点击提交按钮才可以，谢谢。

回答 1

回答 3

打开慕课网App查看更多内容