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

来源：互联网发布：淘宝为什么实名认证编辑：程序博客网时间：2024/06/13 01:20

1.页面配置

<input type="text" class="am-form-field" name="username" placeholder="输入员工姓名搜索" onkeyup="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 onmouseover="onmouseOver(this);" ';                    suggest += 'onmouseout="onmousetOut(this);" ';                    suggest += 'onclick="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;    }

0 0