前端输入适配

功能说明：在前端页面的一个输入框中，输入某个字符，下拉框中就出现对应字符的相关选项，选中某一个之后，会自动添加“；”隔开，并且支持多次输入。

代码实现（主要讲前端代码）：

1.引入前端JS文件，最后两个一定需要的，前面的根据项目需要添加。

<link rel="stylesheet" href="js/jquery-confirm/dist/jquery-confirm.min.css" />
<script src="js/jquery-confirm/dist/jquery-confirm.min.js"></script>
<script src="js/pie_progress/js/jquery-pie-loader.js"></script>
<link href="js/pie_progress/css/jquery-pie-loader.css" rel="stylesheet" />
<link href="js/bootstrap-multiselect-dropdown/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
<script src="js/bootstrap-multiselect-dropdown/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />

<script src="js/jquery-editable-select/src/jquery-editable-select.js"></script>
<link href="js/jquery-editable-select/src/jquery-editable-select.css" rel="stylesheet" />

2.编写输入框。

<input id="affectedComponentsFind" type="text" class="form-control" style="float:left;margin-top:3px;height:28px;width:536px;margin-left:5px;padding:4px 10px; padding-left:4px; padding-right:15px" oninput="checkComponentName(this)"></input>
<ul class="es-list" style="font-size:8px; display:none"></ul>

3.实现oninput方法。

	function checkComponentName(item){
		var componentName;
		var text = $(item).val();
		if (text.indexOf(";") != -1){  //判断输入的内容中是否包含“;”
			var components = new Array();
			components = text.split(";");
			componentName = components[components.length-1]; //截取最后一个分号前的名字
		}else{
			componentName = text;
		}
 		var pjName = $('.pj_name').text(); //此处是用来分离项目的标志，可以忽略
		$.ajax({
			type: "GET",
			async: true,
			data: {'componentName':componentName},
	        url: "/"+pjName+"/feature/findComponentName",  //后台获取数值，此处不贴代码了
	        success: function (ret) {
	        if (200 == ret.code) {	        		
	        		var componentList = ret.result;
		        	$('.es-list').empty();   //每次先清空一下内容
		            $.each(componentList, function(i, component) {   //循环加载后台传过来的所有数据
		                $('.es-list').append('<li class="com_li" onclick="getComName(this)" onmouseover="highlightCom(this)"><span style="color:#000; cursor:pointer; word-wrap:break-word";>'+component+'</span></li>');
	                });
	                $('.es-list').fadeIn();
	        		showItemMenu($('#affectedComponentsFind'), $('.es-list'));
	            }
	        }   
	    });
	}
	
	function showItemMenu(input, list){
		list.css({
			top:   input.position().top + input.outerHeight() - 1,
			left:  input.position().left+5,
			width: input.outerWidth()
		});
		list.fadeIn("fast");
	}
	
	function getComName(item){
		var componentOldName;
		var componentNewName = $(item).text();
		var value;
		
		var text = $('#affectedComponentsFind').val();
		if (text.indexOf(";") != -1){//得到每次输入的值，如果是第一次输入直接添加“;”,如果不是，截取最后一个分号之前的所有数据
			componentOldName = text.substring(0,text.lastIndexOf(";"));//取最后一个分号之前的所有数据
			if(componentOldName.indexOf(componentNewName) != -1){//如果之前有重复的立马报错
				$.alert({
                    title: 'WARNING',
                    content: 'Please do not enter duplicate fields!',
                    autoClose: 'ok|5000'
                });
			value = componentOldName + ";"
			}
			else{
				value = componentOldName + ";" + componentNewName + ";";
			}
			
		}else{
			value = componentNewName + ";";
		}
		
		$('#affectedComponentsFind').val(value);
		$('#affectedComponentsFind').attr('title', value);
		$('.es-list').fadeOut();		
	}
	
	function highlightCom(item){
		$('.com_li').css('background','#fff');
		$(item).css('background','#ccc');
	}