基于SSM框架web搜索功能的实现
2024-08-23 09:02:55
这里适合选用于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");
});
大功告成！
最新文章
- UIScrollView解决无法触发手势
- Python 安装mysqldb
- [Core Javascirpt] Basic Metaprogramming: Dynamic Method
- The golden ratio: 1.618
- 301、404、200、304、500等HTTP状态，代表什么意思?
- poj 2987 最大闭合子图
- 队列（顺序存储）C++模板实现
- 原生app,WEBAPP,混合app
- 接着上一个版本在上一个分离access-token和ticket的版本
- 红豆带你从零学C#系列之：开始C#编程（一）
- Hadoop集成
- 【Android Developers Training】 73. 布局变化的动画
- P1522 牛的旅行 Cow Tours floyed
- 《程序设计入门——C语言》翁恺老师 第三周编程练习记录
- Laravel从入门到精通
- foreach 引发的值类型与引用类型思考
- 【HDU3085】nightmare2 双向BFS
- 最少步数(bfs)
- POJ3046--Ant Counting(动态规划)
- shell模拟ctrl c停止