基于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\"); });

⼤功告成！