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和 ...
随机推荐
- configure new linux
vim http://www.cnblogs.com/wswang/p/5088078.html zsh sh -c "$(curl -fsSL https://raw.github. ...
- form表单只提交数据而不进行页面跳转的解决方案
一般的form提交操作写法为 代码如下: <form action="saveReport.htm" method="post"> …… <i ...
- Sql Server中启用分布式事务小结
1.web服务器与数据库服务器同时启动msdtc服务 2. 2台服务器做出如下配置: 控制面板->管理工具->组件服务->计算机->我的电脑->本地DTC .Net示例: ...
- 字符串匹配的Boyer-Moore算法 详解 加 C# 实现
上一篇文章,我介绍了KMP算法. 但是,它并不是效率最高的算法,实际采用并不多.各种文本编辑器的"查找"功能(Ctrl+F),大多采用Boyer-Moore算法. Boyer-Mo ...
- unity3d下载Obb分包文件
下载OBB插件包 http://pan.baidu.com/s/1c0ouRZE 1.导入插件 注意事项: 如果项目中已经存在Android 插件,需要merge导入的xml文件例如 AndroidM ...
- html5视频播放器
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- N个数全排列的非递归算法
//N个数全排列的非递归算法 #include"stdio.h" void swap(int &a, int &b) { int temp; temp = a; a ...
- struts2 + ajax + json的结合使用，实例讲解
struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...
- WPF获取鼠标当前位置
/// <summary> /// 设置鼠标的坐标 /// </summary> /// <param name="x">横坐标</par ...
- iOS-UIView category
UIView+Extension.h #import <UIKit/UIKit.h> @interface UIView (Extension) @property (nonatomic, ...