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和 ...
随机推荐
- 【poj1067】 取石子游戏
http://poj.org/problem?id=1067 (题目链接) 题意 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走 ...
- iOS 开发之内购 – AppStore
前言本文会给大家详细介绍iOS内购,虽然之前网上也有内购的教程,但是还不够详细,我重新整理出一份教程,希望对大家有所帮助. 基于Xcode7.1.1版本,模拟器iphone6,9.1系统. ...
- VMware 11安装Mac OS X 10.11.5虚拟机以及优化心得
随着苹果WWC大会退出了MAC最新版的10.11.5,本着一颗“极客”的心情,在第一时间用VMWARE虚拟机装上了.然后各种卡顿这里分享一下优化mac虚拟机的心得. 1 从Dock上移除Dashboa ...
- MS-sqlserver数据库2008如何转换成2000
http://bbs.csdn.net/topics/390438560?page=1#post-394316973 MS-sqlserver数据库2008如何转换成2000 回你这个贴等于我写个博客 ...
- 通用跨站脚本攻击(UXSS)
有同学问,用百度搜索了下,发现国内相关介绍基本是没有,就写篇文章来介绍下.不过看到有现成的介绍,就拿来翻译修改下.本文的内容主要翻译来自该文章,把一些没必要的话给删了,做了一些整理修改,然后补充一些案 ...
- 自定义 SqlHelp
using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Data; usin ...
- java常见异常类图(分类了Error/RuntimeExecption、check Exception)
版权:欧初权 http://www.cnblogs.com/langtianya/p/4435537.html
- java.net.SocketException:Software caused connection abort: recv failed 异常分析 +socket客户端&服务端代码
java.net.SocketException:Software caused connection abort: recv failed 异常分析 分类: 很多的技术 2012-01-04 12: ...
- Socket网络编程（3）--两端通信
上篇博文:http://www.cnblogs.com/wolf-sun/p/3329558.html 介绍了客户端连接服务端,一对一,多对一的情况,下面实现服务器接收消息的功能.LZ这些弄的比较慢, ...
- SSN 社会安全号码
SSN是 Social Security Number 的缩写,译为「社会安全号码」,为美国社会安全卡(Social Security Card)上的 9 位数字.SSN 原本目的是用于追踪个人的纳税 ...