AJAX,JSON搜索智能提示
效果
开发结构参考AJAX,JSON用户校验
主要有两个核心文件
1，处理输入字符，进行后台搜索的servlet
Suggest.java
package org.guangsoft.servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.guangsoft.dao.SqlHelper; import com.google.gson.Gson; public class Suggest extends HttpServlet
{ public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
processRequest(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
processRequest(request, response);
} protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
{
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String word = request.getParameter("word");
Connection connection = null;
PreparedStatement prepareStatement = null;
ResultSet resultSet = null;
List wordList = new ArrayList<String>();
try
{
connection = SqlHelper.getConnection();
String sql = "select * from user where username like ? limit 0,5";
prepareStatement = connection.prepareStatement(sql);
prepareStatement.setString(1,"%"+word+"%");
resultSet = prepareStatement.executeQuery();
while(resultSet.next())
{
wordList.add(resultSet.getString("username"));
}
Gson gson = new Gson();
response.getWriter().print(gson.toJson(wordList));
}
catch(Exception e)
{
e.printStackTrace();
}
finally
{
SqlHelper.close(connection, prepareStatement, resultSet);
}
}
}
2，展示前台
suggest.java
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script src="/ajax/js/AjaxUtil.js"></script>
<style>
#div01
{
border:1px gray solid;
width:312px;
height:115px;
display:none;
}
li
{
list-style:none;
width:310px;
}
li:hover
{
background-color: aqua;
cursor:pointer;
} </style>
<script>
function search(word)
{
var div01 = document.getElementById("div01");
if(word != "")
{
sendAjaxReq("get","suggest?word="+word,null,function(data)
{
eval("var wordList="+data);
div01.innerHTML = "";
if(wordList.length != 0)
{
for(var i = 0; i < wordList.length; i++)
{
div01.innerHTML += "<li onclick='setWord(this);'>"+wordList[i]+"</li>"
}
div01.style.display = "block";
}
});
}
else
{
div01.style.display ="false";
}
}
function setWord(li)
{
document.getElementById("word").value = li.innerHTML;
document.getElementById("div01").innerHTML = "";
}
</script>
</head> <body>
<div id="showDiv">
<input type="text" name="word" id="word" size="40"
onkeyup="search(this.value);" />
<input type="button" value="百度一下" onclick="search()">
<div name="div01" class="div01" id="div01"></div>
</div>
</body>
</html>
AJAX,JSON搜索智能提示的更多相关文章
- Servlet+Ajax实现搜索智能提示
一般在百度搜索框输入关键词时,会弹出一些相关信息提示,方便点选: 页面(search.jsp): <input type="text" name="keyWords ...
- 程序员编程艺术第三十六~三十七章、搜索智能提示suggestion,附近点搜索
第三十六~三十七章.搜索智能提示suggestion,附近地点搜索 作者:July.致谢:caopengcs.胡果果.时间:二零一三年九月七日. 题记 写博的近三年,整理了太多太多的笔试面试题,如微软 ...
- Ajax (jquery)实现智能提示搜索框（in Django）
搜索框输入搜索名字,从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下: html文件: <!DOCTYPE html> <ht ...
- jquery+ajax 实现搜索框提示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- winform 与百度搜索智能提示
private void textBox1_TextChanged(object sender, EventArgs e) { listBox1.Items.Clear(); if (string.I ...
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- jquery的智能提示控件
福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...
- 一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- Servlet+Ajax实现搜索框智能提示
简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...
随机推荐
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- Codevs1299 切水果
题目描述 Description 简单的说,一共N个水果排成一排,切M次,每次切[L,R]区间的所有水果(可能有的水果被重复切),每切完一次输出剩下水果数量 数据已重新装配,不会出现OLE错误 时限和 ...
- slf4j和log4j配置
SLF4J即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.按照官方的说法,SLF4J是一个用于日志系统的简单Fac ...
- UDP 内网穿透 心跳
参考:http://blog.csdn.net/jacman/article/details/ 1: 启动一个Server. 2: 启动两个Client. 然后从Server端的Console里边可以 ...
- QA要懂的Linux命令
<一>软件安装相关QA经常需要安装测试软件(jmeter.Mock.python环境搭建.java环境搭建),或者配置测试环境(nginx.ci等),需要了解linux下如何安装软件.在工 ...
- Servlet------(声明式)异常处理
Test.java 其他方法不变,重写 protected void service()方法 public void init(ServletConfig config) throws Servlet ...
- Jenkins 搭建U3D自动发布 Android
工具 [u3d相关的PostProcessBuildPlayer,PerformBuild.cs] 1.Jenkins 开源包 Java -jar jenkins.war,参考链接 http://w ...
- iOS-使用Xcode拉伸图片
如果要制作一个类似于QQ消息气泡的图片,该如何制作呢?android中可以使用.9图片指定图片中的某一部分拉伸,那iOS中类似的功能要如何实现呢,Xcode提供了类似的功能.具体步骤如下: 1.选择需 ...
- [MySql]explain用法及实践
写在前面 explain对我们优化sql语句是非常有帮助的.可以通过explain+sql语句的方式分析当前sql语句. 例子 EXPLAIN table 显示这一行数据属于哪张表,若在查询中为sel ...
- hdu1114 Piggy-Bank （DP基础 完全背包）
链接:Piggy-Bank 大意:已知一只猪存钱罐空的时候的重量.现在的重量,已知若干种钱的重量和价值,猪里面装着若干钱若干份,求猪中的钱的价值最小值. 题解: DP,完全背包. g[j]表示组成重量 ...