基于SSM框架web搜索功能的实现

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

 

一、HTML

<div class="header_search">
　　<input type="text" name="keyword" id="keyword" class="search" placeholder="搜索从这里开始..." />
　　<div id="searchBox" ></div>
</div>

 

二、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="getStudySoft_id" parameterType="String" resultType="model.StudySoft" >
　　　　SELECT id,softName FROM zySoftware WHERE id IN (SELECT MIN(id) FROM zySoftware WHERE softName like #{softName} GROUP BY softName)
</select>

 　　controller层：

@RequestMapping("/getStudySoft_id.do")
@ResponseBody
public ArrayList<StudySoft> getStudySoft_id(String data){
	return studySoftDAO.getStudySoft_id(data);
}

 　　dao层：

public ArrayList<StudySoft> getStudySoft_id(String name){
    	return studySoftMapper.getStudySoft_id(name);
}    

 　　mapper层：

public ArrayList<StudySoft> 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 = "<ul>";  
                                    $.each(json, function () {  
                                        lists += "<li><a href='http://localhost:8080/KCat_2_28/getStudySoft_All.do?num=" + this.id + "' target='_blank' >"+ this.softName +"</a></li>";
                                    });  
                                    lists+="</ul>";  
              
                                    $("#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");
                });

 

大功告成！