jQuery实现自动搜索功能

一、页面上：

1.导入所需的js文件：

<script type="text/javascript" src="<c:url value='/js/jquery.js' />"></script>

<script type="text/javascript" src="<c:url value='/js/j.suggest.js' />"></script>
<script type="text/javascript" src="<c:url value='/js/j.dimensions.js' />"></script>
<script type="text/javascript" src="<c:url value='/js/unicodes.js' />"></script>

 2.提示框的样式：

<style type="text/css">
body {
 font-size: 12px;
}

#suggest {
 width: 200px;
}

.ac_results {
 background: #fff;
 border: 1px solid #7f9db9;
 position: absolute;
 z-index: 10000;
 display: none;
}

.ac_results ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

.ac_results li a {
 white-space: nowrap;
 text-decoration: none;
 display: block;
 color: #05a;
 padding: 1px 3px;
}

.ac_results li {
 border: 1px solid #fff;
}

.ac_over,.ac_results li a:hover {
 background: #c8e3fc;
}

.ac_results li a span {
 float: right;
}

.ac_result_tip {
 border-bottom: 1px dashed #666;
 padding: 3px;
}
</style>

3.jQuery请求获取数据:

   $(function(){

         $.post("<c:url value='/staffManage/staffInfo!toGetName.do' />",{},function(data,textStatus){
              var getN=data.split(",");     
              var allName=new Array();   
              for(var j=0;j<getN.length;j++){ 
                  if(j!=(getN.length-1)){           
                           allName[j]=new Array('',getN[j],getPY_str(getN[j]),'');
                   }      
               } 
            $("#name").suggest(allName,{hot_list:allName,attachObject:"#suggest2"});     
       }); 

   })

4.需要显示自动搜索的文本：

<input type="text" id="name"  name="name" value="${name }" size="20" />

<div id='suggest' class="ac_results"></div>

 

二、后台获取数据的方法(struts2)

public class StaffInfoAction extends BaseAction {

public String toGetName() {
  try {
   String getNa = "";
   List<String> na = this.commonService
     .find("select distinct name from Tablestaff where department!='注销' order by name asc");
   for (int i = 0; i < na.size(); i++) {
    if (na.get(i) != null && !"".equals(na.get(i))) {
     getNa += na.get(i) + ",";
    }
   }
   PrintWriter out = getResponse().getWriter();
   out.write(getNa);
   out.flush();
   out.close();

  } catch (Exception e) {
   // TODO: handle exception
  }
  return null;
 }

}

 

        这是项目中一个例子，用的时候把路径、查询语句那些报错的地方改下就ok啦!