模仿QQ邮箱，邮箱地址输入框

加入我上一篇修改过的jQuery.autocomplete.js 和css

页面代码：

<div>
	<div class="divContainer" style="width: 100%;border: 1px solid #ddd;overflow: auto;">
		<span style="font-weight: bold;float: left;padding-top: 3px;">发送：</span> 
		<div style="margin: auto;padding-top: 0px;font-size: 13px;">
			<div userid="" class="divInput" style="cursor: hand; margin-left: 1px; margin-top: 1px; float: left;"></div>
			<input style="border: 0;width: 10px;" type="text" id="txtToUser" name="txtMail" class="autocomplete"/>
			<input type="hidden" name="hidToUser" id="hidToUser" />
		</div>
	</div>
	<div class="divContainer" style="width: 100%;border: 1px solid #ddd;margin-top: 2px;background: #ffffcc;overflow: auto;">
		<span style="font-weight: bold;float: left;padding-top: 3px;">抄送：</span> 
		<div style="margin: auto;padding-top: 0px;font-size: 13px;">
			<div userid="" class="divInput" style="cursor: hand; margin-left: 1px; margin-top: 1px; float: left;"></div>
			<input style="border: 0;width: 10px;background-color: #ffffcc;" id="txtCcUser" type="text" name="txtMail" class="autocomplete"/>
			<input type="hidden" name="hidCcUser" id="hidCcUser" />
		</div>
	</div>
<div>

JS代码：

	$(function(){
		bindAutoComplete();
	});
	var options = $.extend({}, $.Autocompleter.defaults, {
		minChars: 2,
		width: 400,
		autoFill: false,
		mustMatch: true,
		multipleSeparator: ",",
		onShow: function(element){
			if(!$.browser.msie){
				element.css("position", "absolute");
			}
		},
		parse: function(data){
			var parsed = [];
			var rows = data;
			for (var i=0; i < rows.length; i++) {
				var row = rows[i];
				if (row) {
					parsed[parsed.length] = {
						data: row,
						value: row.ID,
						result: this.formatResult(row)
					};
				}
			}
			return parsed;
		},
		formatItem: function(row, i, max) {
			return row.CNNAME + "<" + row.ID + ">";
		},
		formatResult: function(row) {
			return row.ID;
		}
	});
	function appendUser(element, data){
		var $t = $(element);
		var v = $t.next().val();
		if(data && v.indexOf(data.ID + options.multipleSeparator) == -1){
			var val = data.CNNAME + '<' + data.ID + '>';
			var container = $('<div userid=\"'+ data.ID +'\" class=\"divInput\" style=\"cursor:hand;margin-left:1px;margin-top:1px;float:left;\">');
			container.append(val + options.multipleSeparator);
			container.click(function(){
				if($(this).attr('selected')){
					$(this).css({background:''}).removeAttr('selected');
				}else{
					$('.divInput').filter('[selected]').css({background:''}).removeAttr('selected');
					$(this).css({background:'#ddd'}).attr('selected','true');
				}
			});
			$t.before(container);
			v += data.ID + options.multipleSeparator;
			$t.next().val(v);
		}
	}
	function removeUser(del){
		if(del){
			var userid = del.attr('userid');
			var $t = del.siblings(".autocomplete");
			var nv = $t.next().val();
			nv = nv.replace(userid + options.multipleSeparator, '');
			$t.next().val(nv);
			del.remove();
		}else{
			$('.divInput').each(function(){
				removeUser($(this));
			});
		}
	}
	function bindAutoComplete(){
		$(".autocomplete").autocomplete("/case/uioc/getRsmsAdGroup.shtml", options).result(function(e, data, value){
			appendUser(this, data);
			$(this).val('');
		});

		$('.divContainer').click(function(){
			$(this).find(':input.autocomplete').focus();
		});
		$(".autocomplete").keyup(function(){
			var $t = $(this);
			$t.css('width', ($t.val().length * 15) < 10 ? 10:($t.val().length * 15) + 'px');
			if((event.keyCode == 8 || event.keyCode == 46) && $t.val().length == 0){
				var del = $('.divInput').filter('[selected]');
				if(del.attr('userid')){
					removeUser(del);
				}else{
					del = $t.prev();
					del.css({background:'#ddd'}).attr('selected','true');
				}
			}else{
				var del = $('.divInput').filter('[selected]');
				if(del.attr('userid')){
					del.css({background:''}).removeAttr('selected');
				}
			}
		});
	}