JAVA ajax搜索框_JAVA___jQuery+AJAX_仿百度搜索功能

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

先给大家看看效果...

具体实现步骤.....

第一步:

edit.jsp页面

选项医生" />

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;">

在

$(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 += "

for ( var i = 0; i 

htmlStr += "

";

htmlStr += "

";

htmlStr += data[i].worker_name;

htmlStr += "

";

htmlStr += "

";

}

htmlStr += "

";

$("#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();

}

第二步:

Workers-sturts.xml

第三步:

Action层:

public String ajaxDoctorName() throws Exception {

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

List 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 ajaxDoctorName(String doctor_name) {

return this.workersMapper.ajaxDoctorName(doctor_name);

}

第五步:

Mapper层

public List ajaxDoctorName(@Param("doctor_name") String doctor_name);

Mappar.xml中

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

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