Structs2或者SSH项目中使用AJAX做的输入提示

最新推荐文章于 2019-04-07 11:19:22 发布

Kiss_Fly

最新推荐文章于 2019-04-07 11:19:22 发布

阅读量543

点赞数

分类专栏： SSH 文章标签： ssh ajax 输入提示

本文链接：https://blog.csdn.net/kiss_fly/article/details/50571024

版权

SSH 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.页面配置

<input type="text" class="am-form-field" name="username" placeholder="输入员工姓名搜索" οnkeyup="inputSuggest()">
<div id="result_display" > </div>

2.js函数

 <script type="text/javascript">
        function inputSuggest(){
			   $.post("${pageContext.request.contextPath}/user_inputSuggest.action",function(data){
			   	var s = document.getElementById('result_display');  
		                s.innerHTML = '';  
				for(var i=0 ; i< data.userList.length; i++){
				  var userMes = data.userList[i];
		                  var suggest = '<div οnmοuseοver="onmouseOver(this);" ';  
		                  suggest += 'οnmοuseοut="onmousetOut(this);" ';  
		                  suggest += 'οnclick="setSuggestValue(this.innerHTML);" ';  
		                  suggest += 'class="onmouset_out">' + userMes.username + '</div>';  
		                  s.innerHTML += suggest;  
		                 
				}
			   });
			   
		   }
          function onmouseOver(div) {  
             div.className = 'onmouse_over';  
          }  
          function onmousetOut(div) {  
             div.className = 'onmouset_out';  
          }  
          function setSuggestValue(value) {  
             document.getElementById('txt').value = value;  
             document.getElementById('result_display').innerHTML = '';  
          } 
    
</script>

3.style样式

<style type="text/css" media="screen">
.onmouset_out {
	background-color: #99CCFF;
	padding: 2px 6px 2px 6px;
}
.onmouset_over {
	background-color: #006600;
	padding: 2px 6px 2px 6px;
}
#result_display {
	border: 1px solid #FFFFFF;
}
</style>

4.struct.xml配置action

<action name="user_*" class="newEmployeeAction" method="{1}">

			<!-- ajax员工姓名输入提示查询 -->
			<result name="ajaxlistSUCCESS" type="json">
				<!-- 设置返回数据根对象 -->
				<param name="root">action</param>
				<!-- 返回结果 只需要每个userList对象id和name -->
				<param name="includeProperties">
					userList\[\d+\]\.userid, 
					userList\[\d+\]\.username
				</param>
			</result>
		</action>

5.action中方法的编辑

    public String inputSuggest() throws Exception{
	userList = userKissflyService.findName(userKissfly.getUsername());
	return "ajaxlistSUCCESS";
    }
    private List<UserKissfly> userList;

    public List<UserKissfly> getUserList() {
        return userList;
    }
    public void setUserList(List<UserKissfly> userList) {
        this.userList = userList;
    }