note_cloud--搜索笔记功能（已经分享了的笔记）（两个功能）

功能：用户输入收索的关键词，然后回车触发查询

------------------------------------------------------------------------------

发送ajax请求

发送事件：输入关键词后，点击回车（按键监听事件）

 

$("#search_note").keydown(function(event){
      var code=event.keyCode;
      if(code==13){
          请求发送
      }
})

请求参数：输入的关键词

请求地址：/share/search.do

服务器处理

Controller

Service

Dao

cn_share（select操作 模糊查询）

select * from cn_share where cn_share_title like =#{keyword} limit #{begin} , 3;

ajax回调处理

success：

1.影藏笔记列表的DIV（id='pc_part_2'）调用hide方法

2.显示收索笔记结果列表（id='pc_part_6'）

3.将解析后的结果添加到列表里面

error：提示收索失败

------------------------------------------------------------------------------

Share实体类：

public class Share implements Serializable{
	private String cn_share_id;
	private String cn_share_title;
	private String cn_share_body;
	private String cn_note_id;

------------------------------------------------------------------------------

Dao接口：

 

//搜索笔记(已经分享过的笔记)
public List<Share> findByTitle(Map params);

注意：单击回车键之后进行模糊查询，且显示第一页，具有分页功能，所以需要传递两个参数（搜索的关键词语和页码--此处页码设置为1）

------------------------------------------------------------------------------

映射文件：

 

<!-- 搜索笔记(已经分享过的笔记) -->
  <!--    此种方法也可以,案例中是在Service层进行模糊匹配 
  select * from cn_share where cn_share_title like concat('%',#{title},'%')
   -->
  <select id="findByTitle" parameterType="map" resultType="cn.tedu.cloud_note.entity.Share">
    select * from cn_share where cn_share_title like #{keyword} limit #{begin},3
  </select>

------------------------------------------------------------------------------

业务层接口：

//搜索笔记
public NoteResult<List<Share>> searchNote(String title,int page);

------------------------------------------------------------------------------

业务层实现类：

//搜索笔记
public NoteResult<List<Share>> searchNote(String title,int page) {
	NoteResult<List<Share>> result = new NoteResult<List<Share>>();
	//模糊查询的匹配,也可以在映射文件进行%的匹配
	String keyword = "%";
	if(keyword != null && !keyword.equals("")){
		keyword = "%" + title + "%";//若title为空字符串则查询全部
	}
		
	int begin = (page - 1)*3;//计算抓取记录的起点
	Map<String,Object> params = new HashMap<String,Object>();
	params.put("keyword", keyword);
	params.put("begin", begin);
		
	List<Share> list = shareDao.findByTitle(params);
	if(list == null || list.size() == 0){//没有查到相关Share实例
		result.setStatus(1);
		result.setMsg("没有查到相关笔记");
		return result;
	}
	result.setStatus(0);
	result.setMsg("搜索笔记成功");
	result.setData(list);
	return result;
}

注意：在业务层中对传入的搜索关键字进行匹配（添加%），然后将匹配后的参数传入Dao，并调用,若接收到的参数为空字符串，则相当于查询所有的分享笔记

------------------------------------------------------------------------------

控制层Controller：

 

package cn.tedu.cloud_note.controller;

import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.tedu.cloud_note.entity.Share;
import cn.tedu.cloud_note.service.ShareService;
import cn.tedu.cloud_note.util.NoteResult;

@Controller
@RequestMapping("/share")
public class SearchNoteController {
	@Resource(name="shareService")
	private ShareService service;
	//分享笔记
	
	@RequestMapping("/search.do")
	@ResponseBody
	public NoteResult<List<Share>> execute(String title,int page){
		NoteResult<List<Share>> result = service.searchNote(title);
		return result;
	}
}

------------------------------------------------------------------------------

HTML部分代码：

<script type="text/javascript">
    var page = 1; 
    $(function(){...

 在function外边定义全局变量 var page = 1;分页时候使用

 

//绑定搜索笔记,按回车，搜索结果分页显示(已经分享过的笔记,默显示第一页)
$("#search_note").keydown(searchShareNote);
//点击更多按钮,加载下一页(更多......)
$("#more_note").on("click",moreSearchShare);

------------------------------------------------------------------------------

调用的JS代码：

 

//点击更多按钮,加载查询结果的下一页......(分页功能)
function moreSearchShare(){
	//获取请求参数
	var title = $("#search_note").val().trim();
	page = page + 1;//修改全局变量
	//alert(title+":"+page);
	//发送ajax请求,加载列表
	loadPageShare(title,page);
}


//按回车，加载搜索结果的第一页(已经分享过的笔记,默显示第一页)
function searchShareNote(event){
	var code = event.keyCode;
	if(code == 13){
		//清空已有的Share列表
		$("#share_ul li").empty();
		//获取请求参数
		var title = $("#search_note").val().trim();
		//alert(title);
		//发送ajax请求
		page = 1;//修改全局变量 不能直接传参数1 每一次搜索page都要重置为1
		loadPageShare(title,page);
	}
}

//发送ajax请求
function loadPageShare(title,page){
	  $.ajax({
		  url:path + "/share/search.do",
		  type:"post",
		  data:{"title":title,"page":page},
		  dataType:"json",
		  success:function(result){
			  if(result.status == 0){
				  //获取数据
				  var list = result.data;//Share的集合
				  //将显示笔记的DIV隐藏,更换为搜索笔记的DIV
				  $("#pc_part_2").hide();
				  $("#pc_part_6").show();
				  //将数据写入搜索笔记的li
				  for(var i=0;i<list.length;i++){
					  //记录ID
					  var shareId =list[i].cn_note_id;
					  //记录标题
					  var shareTitle = list[i].cn_share_title;
					  //创建li对象
					  var $li = $(
						'<li class="online">'+
						'<a>'+
						'<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+
						  shareTitle +
					    '</a>'+
						'</li>');
					  //绑定shareId
				      $li.data("shareId",shareId);
					  //将li添加到ul中
					  $("#share_ul").append($li);
				  }
			  }
		  },
		  error:function(){alert("搜索笔记失败");}
	});
}

------------------------------------------------------------------------------

测试结果：

注意：在单击笔记本显示笔记列表时候要将其DIV显示，隐藏搜索share笔记的DIV，在单击更多......的时候，也是进行分页，此时可以调用相同的ajax