演示
1.为输入框绑定时间,输入内容激活事件。(这段是输入框的代码)(页面1)
<form class="input-group input-group-lg" style="margin-top:10px;position:relative;">
<input type="text" class="form-control" placeholder="请输入图片类型" style="font-size: 16px;" οnkeyup="searchWord(this)" id="search1" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default" type="button" style="font-size: 16px;">搜索</button>
</span>
</form>
<div id="showDiv1" style="display:none; position:absolute;z-index:1000;top:146px;background:white; width:188px;font-size: 16px;color:black;border:1px solid #ccc;">
<%//这里用于显示动态提示的数据 %>
</div>
2.获取输入的内容(页面1)
<!-- 完成异步搜索//不能同时运行两个不同的ajax,问题暂未解决 -->
<script type="text/javascript">
function overFn(obj){//鼠标在上面
$(obj).css("background","#F0F8FF");
}
function outFn(obj){//鼠标离开
$(obj).css("background","white");
}
function clickFn(obj){//鼠标点击
$("#search1").val($(obj).html());
$("#showDiv1").css("display","none");
}
//上面的是提示框的css代码,下面的是ajax获取代码
function searchWord(obj){
//1、获得输入框的输入的内容
var word = $(obj).val();
//2、根据输入框的内容去数据库中模糊查询---List<Product>
var content = "";
$.post(
"${pageContext.request.contextPath}/searchWord",
{"word":word},
function(data){
//3、将返回的商品的名称 现在showDiv中
if(data.length>0){
for(var i=0;i<data.length;i++){
content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)' οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
}
$("#showDiv1").html(content);
$("#showDiv1").css("display","block");
}
if(obj.value.length==0){//判断输入框是否为空,如果为空则隐藏提示区域
$("#showDiv1").css("display","none");
}
},
"json"
);
}
</script>
3.ajax将内容提交到服务器去查询,并用List<Object>转成json格式的字符串(页面2)
4.在web层使用‘json’的转换工具将集合‘List<Object>’转成json格式的字符串(页面2)
5.通过‘response.getWriter().write(json);’把json的字符串返还到‘$.post()’方法中(页面2)
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得关键字
String word = request.getParameter("word");
//查询该关键字的所有商品
ImgService service = new ImgService();
List<Object> imgList = null;
try {
imgList = service.findImgByWord(word);
} catch (SQLException e) {
e.printStackTrace();
}
//["xiaomi","huawei",""...]
//使用json的转换工具将对象或集合转成json格式的字符串
/*JSONArray fromObject = JSONArray.fromObject(productList);
String string = fromObject.toString();
System.out.println(string);*/
//谷歌的json转换工具
Gson gson = new Gson();
String json = gson.toJson(imgList);
//System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(json);//这里是把ajax方法中的响应数据返回过去(jspn类型)
}
6.遍历‘json’字符串,获取里面的每段文字,一段文字做一行,添加到‘html’中动态显示(页面1)
//3、将返回的商品的名称 现在showDiv中
if(data.length>0){
for(var i=0;i<data.length;i++){
content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)' οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
}
$("#showDiv1").html(content);
$("#showDiv1").css("display","block");
}
if(obj.value.length==0){//判断输入框是否为空,如果为空则隐藏提示区域
$("#showDiv1").css("display","none");
}
6.1 查询代码-service层
//动态查询(输入框)关键字
public List<Object> findImgByWord(String word) throws SQLException {
ImgDao dao = new ImgDao();
return dao.findImgByWord(word);
}
6.2 查询代码-dao层
//动态查询(输入框)关键字
public List<Object> findImgByWord(String word) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select * from systemimage where img_sort like ? limit 0,8";
List<Object> query = runner.query(sql, new ColumnListHandler("img_sort"), "%"+word+"%");
return query;
}
7.设置一点‘jQuery’样式
function overFn(obj){//鼠标在上面
$(obj).css("background","#F0F8FF");
}
function outFn(obj){//鼠标离开
$(obj).css("background","white");
}
function clickFn(obj){//鼠标点击
$("#search1").val($(obj).html());
$("#showDiv1").css("display","none");
}
8.插件使用:json转换插件 Gson(谷歌出品)