基于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){
StudySoft_id(data);
}
  dao层：
public ArrayList<StudySoft> getStudySoft_id(String name){
StudySoft_id(name);
}
  mapper层：
public ArrayList<StudySoft> getStudySoft_id(String name);
  model层：（提前封装好类属性）
四、js（需要jQuery⽂件）
          $('#keyword').keyup(function(){
var xhr=null;
if(xhr){
xhr.abort();//如果存在ajax的请求，就放弃请求
}ssm框架实现登录功能
var inputText= $.trim(this.value);
if(inputText!=""){//检测键盘输⼊的内容是否为空，为空就不发出请求
xhr=$.ajax({ type: 'POST', url: '${tPath}/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='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"); });
⼤功告成！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。