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和 ...
随机推荐
- POJ 2559 Largest Rectangle in a Histogram
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18942 Accepted: 6083 Description A hi ...
- The AndroidManifest.xml File
manifest (船运的)载货清单 http://www.android-doc.com/guide/topics/manifest/manifest-intro.html Every applic ...
- SSH整合之spring整合struts2(续上)
一.项目结构 二.新建UserAction,继承自ActionSupport,并实现ModelDriven<User>接口:getModel方法是用来装配对象属性的:注意,userServ ...
- Java初学(八)
一.图解String类创建对象及赋值 面试题: 二.String.StringBuffer.StringBuilder区别 1.String内容不可变,而StringBuffer.StringBuil ...
- pthread 学习系列 case2-- 使用互斥锁
ref http://www.ibm.com/developerworks/cn/linux/thread/posix_thread1/index.html #include <pthread. ...
- DedeCMS全版本通杀SQL注入漏洞利用代码
EXP: Exp:plus/recommend.php?action=&aid=1&_FILES[type][tmp_name]=\' or mid=@`\'` /*!50000u ...
- innerText在谷歌、火狐浏览器下的使用
使用innerHTML.replace(/<.+?>/gim,'')代替innerText,简单正则替换一下
- 简单的分页存储过程，Json格式日期转换为一般日期
简单的分页存储过程 CREATE PROC Paged @pageIndex INT, @pageCount INT OUTPUT, @pageSize INT AS DECLARE @count I ...
- linux 的终端字体色和背景色的修改方法（一）
更改Linux系统终端的颜色主题 随着Linux系统在服务器端的崛起,Linux也在慢慢进军个人桌面系统领域.如果在使用Linux系统的终端时,对其颜色主题不是很满意,该怎么修改颜色的主题呢?今天笔者 ...
- c# 重写索引
//using System;//using System.Collections.Generic;//using System.Text; //namespace 索引//{// class ...