JAVA___jQuery+AJAX_仿百度搜索功能

JAVA_JQuery+AJAX实现仿百度搜索功能

 

 

先给大家看看效果...

 

 

 

 

 

具体实现步骤.....

第一步:

edit.jsp页面

<tr>

       <td class="rigthtext">选项医生</td>

        <td class="lefttext"><input class="width200" maxlength="40" type="text" id="tj_doctor" name="record.doctor" value="<s:property value="record.doctor"/>" />

         <div id="doctor_namelist_div"

style="border: 1px solid green; background-color: #EFEFEF; width: 400px; height: 300px; display: none; position: absolute; z-index: 100; overflow-y: scroll; overflow-x: scroll;">

<table class="list_tab">

 

<tr class="row">

<td id="doctor_namelist"></td>

</tr>

</table>

</div>

        </td>

      </tr>

 

 

在

<javascript type=”text/javascript”>

$(document).ready(function(){

 

  $("[id='tj_doctor']").keyup(function (){  //这个keyup要写在//$(document).ready,还要那个keyup,keydown,keypress自己百度看看

   var doctor_name = $("[id='tj_doctor']").val();

  $.ajax({

  type : "POST",

  cache : false,

  url : "${rootPath}/workers/ajaxDoctorName.htm?doctor_name="

  + doctor_name,

  dataType : "json",

  data : {},

  async : false,

  success : function(data) {

  var htmlStr = "";

  if (data&& data.length > 0) {

  htmlStr += "<table class=\"list_tab\">";

  for ( var i = 0; i < data.length; i++) {

  htmlStr += "<tr class=\"row\" οnclick=\"selectDName('"+(i+1)+"_dName')\">";

  htmlStr += "<td id=\""+(i+1)+"_dName\" style=\"text-align:left;\">";

  htmlStr += data[i].worker_name;

  htmlStr += "</td>";

  htmlStr += "</tr>";

  }

  htmlStr += "</table>";

 

  $("#doctor_namelist_div").html(htmlStr);

  $("#doctor_namelist_div").show();

  }else{

  //没有数据div就不显示

  $("#doctor_namelist_div").hide();

 

  }

                      }

  }); 

   });

  });

 

  function selectDName(tdId){

        $("[id='tj_doctor']").val(document.getElementById(tdId).innerHTML);

      $("#doctor_namelist_div").hide();

  }

 

</javascript>

 

 

 

第二步:

Workers-sturts.xml

<action name="ajaxDoctorName" class="com.hljw.cmeav.action.workers.WorkersAction" method="ajaxDoctorName">

          <interceptor-ref name="hljw-user"></interceptor-ref>

      </action>

 

 

第三步:

Action层:

public String ajaxDoctorName() throws Exception {

 

String doctor_name = this.getParameter("doctor_name");

 

List<Workers> list = this.workersService.ajaxDoctorName(doctor_name);

JSONArray json = JSONArray.fromObject(list);

try {

response.setCharacterEncoding("GBK");

response.setContentType("application/json; charset=gbk");

response.getWriter().write(json.toString(1, 1));

} catch (IOException e) {

e.printStackTrace();

}

return NONE;

}

 

第四步:

Service层:

public List<Workers> ajaxDoctorName(String doctor_name) {

return this.workersMapper.ajaxDoctorName(doctor_name);

}

 

第五步:

Mapper层

public List<Workers> ajaxDoctorName(@Param("doctor_name") String doctor_name);

 

Mappar.xml中

<select id="ajaxDoctorName" parameterType="String" resultType="Workers"> 

select * from tj_workers where flag=1 and (worker_name like CONCAT(CONCAT('%',#{doctor_name}),'%') or worker_code like CONCAT(CONCAT('%',#{doctor_name}),'%'))

</select>

 

 

写的比较简单单很实用....