可输入动态下拉框写法

最近要实现可输入下拉框，写法如下：

<li class="col-md-3">
						<strong>一级标签</strong>
						<select name="parentTagName" id="parentTagName" style="width:150px;" onchange="select()">
							<option value="" >请选择</option>
							<c:forEach items="${allParentTags }" var="tag" varStatus="status">
								 <option <c:if test="${parentTagName==tag.tagName  }">selected</c:if> value="${tag.tagName }" >${tag.tagName }</option> 
							</c:forEach>	
						</select>
						<input type="text"  name="parentTagName" placeholder="输入一级标签" value="${parentTagName }" style="width:130px;margin-left:-157px">
					</li>

<script type="text/javascript">
/*可输入下拉框  */
function select(){
	var selected = $('#parentTagName').val();
	//将下列框选择值赋给输入框
	$('input[name="parentTagName"]').val(selected);
}

/*输入后模糊检索一级标签  */
 function searchParentTags(){
	 var parentTagName = $('input[name="parentTagName"]').val();
	 $.ajax({
	      type: 'POST',
	  	  url: "${ctx}/manage/findParentTags",
	  	  data :{"parentTagName":parentTagName},
	  	  traditional:true,
	  	  success: function(data) {
	  		  if (data != null) {
	  			  /* 去除原来下拉框选项 */
	  				$("#parentTagName").empty();
	  			  for(var i = 0;i < data.length;i++){
	  				 /*添加检索到的下拉框选项 */
	  				$("#parentTagName").append("<option value='" + data[i].tagName + "'>" + data[i].tagName + "</option>");
	  			  }
	  		  }
		  }
	  	}) 
} 
 
</script>