JQ模糊查询插件,JQ自定义插件构造函数写法

最新推荐文章于 2021-06-04 08:32:32 发布

ob杨

最新推荐文章于 2021-06-04 08:32:32 发布

阅读量280

点赞数

分类专栏： js和jq 前端开发规范文章标签： jquery javascript js

本文链接：https://blog.csdn.net/weixin_40828023/article/details/105069569

版权

js和jq 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端开发规范

9 篇文章 0 订阅

订阅专栏

//构造函数写法
;(function($,window,document,undefined){//注意这里的分号必须加
    //插件的全部代码
	var FazzSearch = function (ele, options) {
		// if(options =='undefinded' || options == Object )
		this.$element = ele,
		this.defaults = {
			//这里的this是JQuery对象
			triggerID: this.$element.attr("id"),
			fazzArr : [],
			searchArr: [],
			// methods: methods,
			listWidth: '100%',
			$this: ele,//提示当前对象的dom节点名称,这里的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。 
			listDom: null,
			selector: this.$element.attr("id")+'_item',
			isPos: false,
			isNeedBlurSetTime: false,
			itemCallback: function () {
				
			},
			callback: function () {
				
			},
		},
		this.opts = $.extend({}, this.defaults, options);
	}
	FazzSearch.prototype = {
		//初始化
		init : function(){
			var _this = this;
			return this.$element.each(function(){ //遍历匹配的元素及插件实例的所有元素，此处的this表示为jquery对象，而不是dom对象
				$(this).css({
					
				})
				$(this).bind('input propertychange', function() {
					_this.initData();
				});
				if(this.isNeedBlurSetTime){
					$(this).on('blur',function(e){
						var self = $(this);
						var setT = setTimeout(function(){
							self.siblings('.fazzSearchList').html('').hide();
							console.log('失交');
							clearTimeout(setT)
						},300)
					})
				}
			})
		},
		initData : function(){
			this.opts.listDom = this.opts.listDom ? this.opts.listDom : this.$element.next('.fazzSearchList');//如果出现兄弟节点有两个
			this.opts.fazzArr = [];
			this.initListDomStyle();
			this.adEventInputChange();
		},
		initListDomStyle : function(){
			var listDom = this.opts.listDom;
			listDom.html('');
			listDom.css({'width':this.$element.outerWidth()},{'padding':'10px 0 10px 6px'});
			if(("ontouchstart" in window)){
				listDom.css('width',this.$element.parent().outerWidth());
				if(listDom.hasClass('liPc')){
					listDom.removeClass('liPc');
				}
				listDom.addClass('liMoblie');
			}else{
				if(listDom.hasClass('liMoblie')){
					listDom.removeClass('liMoblie')
				}
				listDom.addClass('liPc');
			}
			console.log(this.$element)
			if(this.opts.isPos){
				listDom.parent().css('position','relative');
				listDom.addClass('liPcPosi');
				listDom.css('top',this.$element.outerHeight())
			}
		},
		//添加子节点
		addChild : function(item,selector){
			return "<li class='" + selector + "' data-val='" + item + "'>"+item+"</li>";
		},
		//如果输入值为空,清除缓存和数组dom
		closeData : function(){
			this.opts.fazzArr = [];
			this.opts.listDom.html('').hide();
		},
		//监听input输入框值改变
		adEventInputChange : function(){
			var fazzSearchValue = this.$element.val();//input输入框值改变
			console.log('fazzSearchValue->',fazzSearchValue)
			if(fazzSearchValue==''){
				this.closeData();
				return;
			}
			this.dealWithData(fazzSearchValue);
		},
		//处理子节点绑定点击事件
		listItemBindClick : function(){
			$('body').on('click',opts.selector,function(){
				
			})
		},
		//如果存在模糊数组
		hasData : function(item){
			var listDom = this.opts.listDom;
			listDom.show();
			listDom.append(this.addChild(item));
			this.opts.fazzArr.push(item);
		},
		//处理模糊数组匹配和子节点添加
		dealWithData : function(fazzSearchValue){
			var searchArr = this.opts.searchArr;
			for (var i = 0; i < searchArr.length; i++) {
				var result = searchArr[i].indexOf(fazzSearchValue);
				if( result > -1 && this.opts.fazzArr.indexOf(searchArr[i])== -1){
					this.hasData(searchArr[i]);
				}
			}
		}
		
	}
	 //在插件中使用Beautifier对象
	$.fn.fazzSearch = function(options){
			//创建Beautifier的实体
			//this为jQuery选中的元素集合
			var fazzSearch = new FazzSearch(this,options);
			//调用其beautify方法
			return fazzSearch.init();
			//以后在此处调用新的方法即可，格式为：
			//return beautifier.方法名()
	}
})(jQuery,window,document);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/fazzSearchBox.css"/>
		<style type="text/css">
			*{margin: 0;padding: 0;}
		</style>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/fazzExtend.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="text" name="" id="fazzSearch" value="" class="fazzSearch"/>
		<ul class="fazzSearchList fazzSearchList1"></ul>
		
		<input type="text" name="" id="fazzSearch1" value="" class="fazzSearch"/>
		<ul class="fazzSearchList fazzSearchList2"></ul>
		<script type="text/javascript">
			// var arr=[{ id:1,val:"sss"},{ id:2,val:"bb"},{ id:11,val:"advvasc"},{ id:3,val:"a"},{ id:4,val:"c"},{ id:5,val:"d"},{ id:6,val:"x"},{ id:7,val:"5"},{ id:8,val:"4"}]
			 $(function(){
				var arr = ['333','1111','aaa','bbb','c','b','z'];
				$('#fazzSearch').fazzSearch({
					searchArr:arr,
					listDom: $('.fazzSearchList1'),
					isPos:true
				})
				$('#fazzSearch1').fazzSearch({
					searchArr: arr,
					listDom: $('.fazzSearchList2'),
				})
			});
		</script>
	</body>
</html>

.fazzSearch{outline: none;border: 1px solid #ccc;width: 80px;height: 40px;line-height: 40px;text-indent: 5px;}
.fazzSearchList{display: block;display: none;width: 100%;max-height: 120px;overflow-y: auto;border: 1px solid #F6F7F8;background-color: #ffffff;}
.fazzSearchList li{cursor: pointer;height: 30px;line-height: 30px;width: 97%;text-align: left;color: #222;border-bottom: 1px solid #CCCCCC;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; word-break: break-all;}
.fazzSearchNoData{padding: 0;color: red;}
.liPcPosi{position: absolute;top: 0;left: 0;}
.liPc li {color: #999;border-bottom: 1px solid #f1f1f1;}
.liPc li:last-child{border-bottom: 0;}
.liMoblie li {color: #999;border-bottom: 1px solid #f1f1f1;}
.liMoblie li:last-child{border-bottom: 0;}
.special{position: absolute;top: 0;left: 0;z-index: 100;}

ob杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQ模糊查询插件,JQ自定义插件构造函数写法

//构造函数写法;(function($,window,document,undefined){//注意这里的分号必须加 //插件的全部代码 var FazzSearch = function (ele, options) { // if(options =='undefinded' || options == Object ) this.$element = ele, ...
复制链接

扫一扫