【JS】模块化开发JD搜索框

css

<style type="text/css">
	.search-wrap {
		width: 546px;
		height: 32px;
		border: 2px solid #e2231a;
		box-sizing: border-box;
	}

	.search-wrap .search-input {
		width: 100%;
		height: 100%;
		outline: none;
		background-color: transparent;
		box-sizing: border-box;
		text-indent: 1.2em;
		border: 0;
	}

	.search-wrap .search-ct {
		position: absolute;
		top: 15px;
		left: 16px;
		z-index: -1;
		width: 100%;
		height: 20px;
		text-indent: 1em;
		font-size: 14px;
		color: #989898;
	}
</style>

body

<body>
	<div class="search-wrap">
		<div id="J_shelper" class="search-heler" style="display: none;">
			["卷纸", "鼠标垫", "金龙鱼调和油", "全棉时代湿巾", "欧普照明"]
		</div>
		<div id="J_search_dp" class="search-ct"></div>
		<input type="text" id="J_search_kw" class="search-input" />
	</div>
	<script type="text/javascript" src="./js/utils.js"></script>
	<script type="text/javascript" src="./js/search.js"></script>
</body>

utils.js

//添加点击事件
function addEvent(el, type, fn){
  if(el.addEventListener){
    // 兼容IE9及以上
    el.addEventListener(type, fn, false);
  }else if(el.attachEvent){
    // 兼容IE8及其以下
    el.attachEvent('on' + type, function(){
      fn.call(el);
    });
  }else{
    //如果都不行，那么就采取原始的点击方法
    el['on' + type] = fn;
  }
}

search.js

window.onload = function(){
	init();
}

function init(){
	keySearch();
}

var keySearch = (function(){
	var sHelper = JSON.parse(document.getElementById('J_shelper').innerHTML),  //获取推荐内容
	    sDisplay = document.getElementById('J_search_dp'), //获取推荐展示框
	    sKeyWords = document.getElementById('J_search_kw'), //获取input框
	    pos = 0,  //sHelper数组下标
	    timer = null;

	addEvent(sKeyWords, 'focus', function(){
		clearInterval(timer);  //聚焦时停止计时器
		sDisplay.style.color = '#ccc';
	});

	addEvent(sKeyWords, 'input', function(){
		isShowDp(this.value);
	});
	//propertychange方法兼容IE
	addEvent(sKeyWords, 'propertychange', function(){
		isShowDp(this.value);
	})

	addEvent(sKeyWords, 'blur', function(){
		clearInterval(timer);  //失去焦点时先停止计时器，防止计时器叠加
		setAuto(true);
		sDisplay.style.color = '#989898';
	});
	/*
	 * 启动自动播放
	 * @param {isBoolean}
	 * 1. true表示从shepler数组第一项开始播放
	 * 2. flase表示直接从shepler暂停的那项开始播放
	 */
	function setAuto(isBoolean){
		if(isBoolean){
			kwChanges();  //在延时器之前更改展示框的内容
		}
		timer = setInterval(function(){
			kwChanges();
		},3000);
	}
	//是否显示展示框
	function isShowDp(val){
		//if sKeyWords没有输入的情况下	
		if(val.length <= 0){
			setAuto(false);
			sDisplay.style.display = 'block';
		}else{
			//sKeyWords输入状态下隐藏sDisplay
			clearInterval(timer);
			sDisplay.style.display = 'none';
		}
	}
    //动态推荐内容
	function kwChanges(){
		var len = sHelper.length;
		sDisplay.innerHTML = sHelper[pos];
		if(pos >= len - 1){
			pos = 0;
		}else{
			pos++;
		}
	}


	return function(){
		setAuto(true);
	}
})();
posted @ 2021-07-06 15:19  razzh  阅读(175)  评论(0)    收藏  举报