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

 

大功告成！