JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div class="parentCls">
		<div class="drop-trigger"><i class="caret"></i></div>
		<input type="text" class="inputElem" autocomplete="off"/>
	</div>

CSS

* {margin:0;padding:0;}
	ul,li{list-style:none;}
	.parentCls {margin:50px;position:relative;}
	.inputElem {height:24px;}

	.drop-trigger {
		cursor: pointer;
		display: inline-block;
		position:absolute;
		top:0;
		height: 20px;
		width: 20px;
	}
	.drop-trigger .caret {
		border-color: #000000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
		border-image: none;
		border-right: 4px dashed rgba(0, 0, 0, 0);
		border-style: solid dashed dashed;
		border-width: 6px;
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		margin-left: 2px;
		margin-top: 11px;
		width: 0;
	}
	.parentCls li{height:22px;line-height:22px;}
	/* 鼠标移上去的class */
	.hoverBg {background:#999;}
	.hidden {display:none;}

JavaScript

/**
 * 一个解决大数据列表渲染效率的下拉菜单组件。
 * @author tugenhua
 * @time 2014-01-21
 */

 function DropList(options) {
	
	this.config = {
		parentCls        :  '.parentCls',       // 父元素class
		inputElemCls     :  '.inputElem',       // 当前input标签input的class
		inputWidth       : 100,                 // 目标元素的宽度
		selectCls        :  '.caret',           // 下来小箭头class
		hoverBg          : 'hoverBg',           // 鼠标移上去的背景
		isSelectHide     : true,                // 点击下拉框 是否隐藏
		timeId           : 100,                 // 默认多少毫秒消失下拉框
		// 数据源返回的格式如下：静态数据 否则的话(如果数组为空的话) 在内部发post请求
		dataSource: [
            {text: "列表项1", value: 1},
            {text: "列表项2", value: 2},
            {text: "列表项3", value: 3},
            {text: "列表项4", value: 4},
            {text: "列表项5", value: 5},
            {text: "列表项6", value: 6},
            {text: "列表项7", value: 7},
            {text: "列表项8", value: 8},
            {text: "列表项9", value: 9},
            {text: "列表项10", value: 10},
            {text: "列表项11", value: 11}
        ],
		renderHTMLCallback : null,                  // keyup时 渲染数据后的回调函数
		callback           : null                   // 点击某一项 提供回调
	};

	this.cache = {
		onlyCreate          : true, // 只渲染一次代码
		currentIndex        : -1,
		oldIndex            : -1,
		timeId              : null  // setTimeout定时器
	};
	this.init(options);
 }
 
 DropList.prototype = {
	
	constructor: DropList,
	
	init: function(options) {
		this.config = $.extend(this.config, options || {});
		var self = this,
			_config = self.config,
			_cache = self.cache;
		$('.drop-trigger').css({"left":_config.inputWidth - 20 + 'px'});
		/* 
		 * 鼠标点击输入框时 渲染数据
		 */
		$(_config.inputElemCls).each(function(index,item){
			
			// 对input定义宽度 其父节点div也是根据input宽度定义的。
			$(item).css({'width':_config.inputWidth});
			var tagParent = $(item).closest(_config.parentCls);
			$(tagParent).css({'width':_config.inputWidth});

			$(item).bind('keyup',function(e){
				e.preventDefault();
				var targetVal =...