解决 mui 通讯录 索引列表，反复加载导致的搜索不正确问题

Posted 2022-12-09 mjsoftwareking

按照mui提供的索引列表加载展示数据，在多次加载时会出现搜索不正常的问题，经过检查发现每重新加载一次数据就会重新注册input 的input事件，我的想法是保证只有一个window.indexedList = new mui.IndexedList(list);操作的实例。

修改 mui.indexedlist.js 代码，增加方法。

于是仿照init方法增加个一样的方法，但是在此处不再做绑定时间处理。

使用

与mui示例一样根据需要进行加载，但是在每次切换数据时使用

  window.indexedList.switchData(list);   

list 还是原有对象（即：document.getElementById('list'); 得到的对象），这样就保证了事件注册时唯一的，没切换只是重新加载了搜索缓存的数据和需要搜索的内容而已，有效避免了由于多次添加事件导致的搜索多次而引起搜索数据显示不正确的问题。

以下是mui.indexedlist.js 代码

/**
 * IndexedList
 * 类似联系人应用中的联系人列表，可以按首字母分组
 * 右侧的字母定位工具条，可以快速定位列表位置
 * varstion 1.0.0
 * by Houfeng
 * [e-mail]
 **/

(function($, window, document) 

	var classSelector = function(name) 
		return '.' + $.className(name);
	

	var IndexedList = $.IndexedList = $.Class.extend(
		/**
		 * 通过 element 和 options 构造 IndexedList 实例
		 **/
		init: function(holder, options) 
			var self = this;
			self.options = options || ;
			self.box = holder;
			if(!self.box) 
				throw "实例 IndexedList 时需要指定 element";
			
			self.createDom();
			self.findElements();
			self.caleLayout();
			self.bindEvent();
		,
		createDom: function() 
			var self = this;
			self.el = self.el || ;
			//styleForSearch 用于搜索，此方式能在数据较多时获取很好的性能
			self.el.styleForSearch = document.createElement('style');
			(document.head || document.body).appendChild(self.el.styleForSearch);
		,
		findElements: function() 
			var self = this;
			self.el = self.el || ;
			self.el.search = self.box.querySelector(classSelector('indexed-list-search'));
			self.el.searchInput = self.box.querySelector(classSelector('indexed-list-search-input'));
			self.el.searchClear = self.box.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear'));
			self.el.bar = self.box.querySelector(classSelector('indexed-list-bar'));
			self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a'));
			self.el.inner = self.box.querySelector(classSelector('indexed-list-inner'));
			self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item')));
			self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li'));
			self.el.alert = self.box.querySelector(classSelector('indexed-list-alert'));
		,
		caleLayout: function() 
			var self = this;
			var withoutSearchHeight = (self.box.offsetHeight - self.el.search.offsetHeight) + 'px';
			self.el.bar.style.height = withoutSearchHeight;
			self.el.inner.style.height = withoutSearchHeight;
			var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px';
			self.el.barItems.forEach(function(item) 
				item.style.height = barItemHeight;
				item.style.lineHeight = barItemHeight;
			);
		,
		scrollTo: function(group) 
			var self = this;
			var groupElement = self.el.inner.querySelector('[data-group="' + group + '"]');
			if(!groupElement || (self.hiddenGroups && self.hiddenGroups.indexOf(groupElement) > -1)) 
				return;
			
			self.el.inner.scrollTop = groupElement.offsetTop;
		,
		bindBarEvent: function() 
			var self = this;
			var pointElement = null;
			var findStart = function(event) 
				if(pointElement) 
					pointElement.classList.remove('active');
					pointElement = null;
				
				self.el.bar.classList.add('active');
				var point = event.changedTouches ? event.changedTouches[0] : event;
				pointElement = document.elementFromPoint(point.pageX, point.pageY);
				if(pointElement) 
					var group = pointElement.innerText;
					if(group && group.length == 1) 
						pointElement.classList.add('active');
						self.el.alert.innerText = group;
						self.el.alert.classList.add('active');
						self.scrollTo(group);
					
				
				event.preventDefault();
			;
			var findEnd = function(event) 
				self.el.alert.classList.remove('active');
				self.el.bar.classList.remove('active');
				if(pointElement) 
					pointElement.classList.remove('active');
					pointElement = null;
				
			;
			self.el.bar.addEventListener($.EVENT_MOVE, function(event) 
				findStart(event);
			, false);
			self.el.bar.addEventListener($.EVENT_START, function(event) 
				findStart(event);
			, false);
			document.body.addEventListener($.EVENT_END, function(event) 
				findEnd(event);
			, false);
			document.body.addEventListener($.EVENT_CANCEL, function(event) 
				findEnd(event);
			, false);
		,
		search: function(keyword) 
			var self = this;
			keyword = (keyword || '').toLowerCase();
			var selectorBuffer = [];
			var groupIndex = -1;
			var itemCount = 0;
			var liArray = self.el.liArray;
			var itemTotal = liArray.length;
			self.hiddenGroups = [];
			var checkGroup = function(currentIndex, last) 
				if(itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) 
					selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
					self.hiddenGroups.push(liArray[groupIndex]);
				;
				groupIndex = currentIndex;
				itemCount = 0;
			
			liArray.forEach(function(item) 
				var currentIndex = liArray.indexOf(item);
				if(item.classList.contains($.className('indexed-list-group'))) 
					checkGroup(currentIndex, false);
				 else 
					var text = (item.innerText || '').toLowerCase();
					var value = (item.getAttribute('data-value') || '').toLowerCase();
					var tags = (item.getAttribute('data-tags') || '').toLowerCase();
					if(keyword && text.indexOf(keyword) < 0 &&
						value.indexOf(keyword) < 0 &&
						tags.indexOf(keyword) < 0) 
						selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
						itemCount++;
					
					if(currentIndex >= itemTotal - 1) 
						checkGroup(currentIndex, true);
					
				
			);
			if(selectorBuffer.length >= itemTotal) 
				self.el.inner.classList.add('empty');
			 else if(selectorBuffer.length > 0) 
				self.el.inner.classList.remove('empty');
				self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "display:none;";
			 else 
				self.el.inner.classList.remove('empty');
				self.el.styleForSearch.innerText = "";
			
		,
		bindSearchEvent: function() 
			var self = this;
			self.el.searchInput.addEventListener('input', function() 
				var keyword = this.value;
				self.search(keyword);
			, false);
			$(self.el.search).on('tap', classSelector('icon-clear'), function() 
				self.search('');
			, false);
		,
		/**
		 * 二次切换时使用此方法 window.indexedList.switchData(list);，完成加载，保证事件注册唯一
		 * @param Object holder
		 * @param Object options
		 */
		switchData: function(holder, options) 
			var self = this;
			self.options = options || ;
			self.box = holder;
			if(!self.box) 
				throw "实例 IndexedList 时需要指定 element";
			
			self.createDom();
			self.findElements();
			self.caleLayout();
			//self.bindEvent(); //不在注册事件
		,
		/**
		 * 清除搜索文字
		 */
		clearSearch: function() 
			var self = this;
			self.el.searchInput.value = '';
			self.search('');
		,
		bindEvent: function() 
			var self = this;
			self.bindBarEvent();
			self.bindSearchEvent();
		
	);

	//mui(selector).indexedList 方式
	$.fn.indexedList = function(options) 
		//遍历选择的元素
		this.each(function(i, element) 
			if(element.indexedList) return;
			element.indexedList = new IndexedList(element, options);
		);
		return this[0] ? this[0].indexedList : null;
	;

)(mui, window, document);

switchData 和clearSearch 为添加的方法。

注意：下面方法虽然可以阻止由于输入了搜索内容在切换索引数据的异常显示问题，但是该方法不能还原搜索的原有状态，只会保持点击搜索条时的显示状态。