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和 ...
随机推荐
- BZOJ2186 欧拉函数
欧拉函数:一般记作φ(n),表示1-n中与n互质的数的数量. 欧拉函数是积性函数,即φ(m*n)=φ(m)*φ(n) //这条定理基友面试时还遇到了= = 欧拉函数的值φ(n)=n*(1-p[1])* ...
- html转jsp乱码问题
先由html后缀转为jsp后缀.然后添加 <%@ page language="java" import="java.util.*" pageEncodi ...
- 循序渐进Linux 3：Linux下软件安装与管理
一.源码安装 ./configuremakemake install 二.RPM包 1. 安装软件包 rpm -i [辅助选项] file1.rpm file2.rpm主选项 -i: install, ...
- classpath、path、JAVA_HOME的作用
CLASSPATH是什么?它的作用是什么? 它是javac编译器的一个环境变量. 它的作用与import.package关键字有关. 当你写下improt java.util.*时,编译器面对impo ...
- Extreme Learning Machine(ELM)的工程哲学
Extreme Learning Machine(ELM)的工程哲学 David_Wang2015 发布于2015年5月6日 11:29 工程问题往往需要的是一定精度范围内的结果,而不是“真正的”结果 ...
- C#实现eval 进行四则运算
昨天在园子里看到有园友,写了相同标题的一篇文章.重点讲的是中缀表达式转换为后缀表达式的算法,但是实现的四则运算 有bug.其实我没看之前也不懂什么是 中缀和后缀表达式,之前有用过js eval 内置函 ...
- JS 动画基础
获取元素的样式 getStyle函数 function getStyle(element, attr) { if(element.currentStyle) { //针对IE return eleme ...
- centos下使用eclipse jlink 调试uboot
一.安装java jdk 1.CentOS默认情况下,会安装OpenOffice之类的软件,这些软件需要Java的支持,默认会安装JDK的环境,若需要特定的Java环境,最好将默认的JDK彻底删除: ...
- asp.net缓存（转）
转自:http://www.cnblogs.com/knowledgesea/archive/2012/06/20/2536603.html 一.缓存概念,缓存的好处.类型. 缓 ...
- LINUX中，Vi编辑器的几种模式及保存、退出等命令
vi编辑器有三种模式: 命令模式,编辑模式,末行模式 打开vi后首先是命令模式,用i,o,a等进入编辑模式,按esc退出编辑模式,回到命令模式. 在命令模式下输入:wq表示保存退出,:wq!强制保存退 ...