jquery mysql jsp搜索功能_基于SSM框架web搜索功能的实现

这里适合选用于jsp搭建的网站，数据库采用MySQL

一、HTML

二、CSS样式

.header_search{

float: left;

padding: 16px 0 0 0px;

}

.header_search .search{

width: 270px;

height: 25px;

background: #FFFFFF;

font-size: 14px;

text-indent: 10px;

border: 1px solid #fec200;

}

#searchBox ul{

border-bottom: 1px solid #fec200;

border-left: 1px solid #fec200;

border-right: 1px solid #fec200;

}

#searchBox ul li {

width: 257px;

height: 30px;

background: #ffffff;

font-size: 15px;

padding-left: 13px;

color: #000000;

line-height:30px;

}

#searchBox ul li a{

text-decoration: none;

color: #000000;

}

#searchBox ul li a:hover{

text-decoration: none;

color: #000000;

}

三、后台数据

config层：

SELECT id,softName FROM zySoftware WHERE id IN (SELECT MIN(id) FROM zySoftware WHERE softName like #{softName} GROUP BY softName)

controller层：

@RequestMapping("/getStudySoft_id.do")

@ResponseBody

public ArrayList getStudySoft_id(String data){

return studySoftDAO.getStudySoft_id(data);

}

dao层：

public ArrayList getStudySoft_id(String name){

return studySoftMapper.getStudySoft_id(name);

}

mapper层：

public ArrayList getStudySoft_id(String name);

model层：(提前封装好类属性)

四、js(需要jQuery文件)

$('#keyword').keyup(function(){

var xhr=null;

if(xhr){

xhr.abort();//如果存在ajax的请求，就放弃请求

}

var inputText= $.trim(this.value);

if(inputText!=""){//检测键盘输入的内容是否为空，为空就不发出请求

xhr=$.ajax({

type: 'POST',

url: '${pageContext.request.contextPath}/getStudySoft_id.do',

cache:false,//不从浏览器缓存中加载请求信息

data: {

'data' : "%" + inputText + "%"//发送的数据

},

dataType: 'json',//返回数据

success: function(json) {

if (json.length != 0) {//检测返回的结果是否为空

var lists = "

• ";

$.each(json, function() {

lists += "

"+ this.softName +"";

});

lists+="

";

$("#searchBox").html(lists).show();//将搜索到的结果展示出来

$("li").mouseenter(function(){

$("#keyword").val($(this).text());

$(this).css({

background:'#d5d5d5'});

}).mouseleave(function() {

$(this).css({

background:'#ffffff'});

}).click(function() {

$("#keyword").val($(this).text());//点击某个li就会获取当前的值 ，并隐藏

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

})

} else{

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

}

}

});

}else{

$("#searchBox").hide();//没有查询结果就隐藏搜索框

}

});

$("#keyword").blur(function(){//输入框失去焦点的时候就隐藏搜索框

$("#searchBox").slideUp("slow");

});

大功告成！