仿照 Goolge Suggest,主要用到的技术是ajax。定时的发送请求道数据库比对。
基本原理分析,当用户输入关键字,便向服务器发送请求,服务器根据用户输入的关键字,在数据库中搜索相关的关键字信息,并返回给客户端。
代码分析:java 根据输入关键字返回相应结果
package book.suggest;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Vector;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SearchSuggest extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, java.io.IOException {
String search = request.getParameter("search");//获得请求中cate的值
System.out.println("哈哈 现在进的去了");
//定义查询数据库的SQL语句
String sql = "select title from suggest where title like '"+search+"%' order by title";
Connection conn = null;//声明Connection对象
Statement stmt = null;//声明Statement对象
ResultSet rs = null;//声明ResultSet对象
Vector vData = new Vector();
//response.setContentType("text/xml");//设置返回数据类型为xml格式
java.io.PrintWriter out = response.getWriter();
try {
// 加载数据库驱动类
Class.forName("com.mysql.jdbc.Driver");
// 访问数据库的地址
String url = "jdbc:mysql://localhost/treeview";
//创建Connection对象
conn = DriverManager.getConnection(url, "root", "12345678");
// 创建Statement对象
stmt = conn.createStatement();
// 执行SQL语句,返回记录集
rs = stmt.executeQuery(sql);
//定义AblumEO实体对象
while (rs.next())
{
vData.add(rs.getString("TITLE"));
}
StringBuffer buf = new StringBuffer();
for (int i=0;i<vData.size();i++)
{
String keyword = (String)vData.get(i);
buf.append(keyword+"\n");
}
out.print(buf.toString());
System.out.println(buf.toString());
// out.print(parasToXML(vData));//调用parasToXML()方法
} catch (Exception e) {
e.printStackTrace();
} finally {//最后关必记录集,Connection对象
try {
// this will close any associated ResultSets
if (stmt != null)
stmt.close();
if (conn != null)
conn.close();
} catch (SQLException sqle) {
}
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, java.io.IOException {
doPost(request, response);
}
/*
public String parasToXML(Vector v) {// 该方法将数据转化成XML格式输出
StringBuffer buf = new StringBuffer();
buf.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
buf.append("<pictures>");
for (int i = 0; i < v.size(); i++) {
AlbumEO album = (AlbumEO) v.get(i);
buf.append("<item>");
buf.append("<name>" + album.getAlbumName() + "</name>");
buf.append("<url>" + album.getAlbumURL() + "</url>");
buf.append("<description>" + album.getAlbumDescription()
+ "</description>");
buf.append("</item>");
}
buf.append("</pictures>");
return buf.toString();
}
*/
}
ajax发送请求和处理返回信息
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
}
}
function createAjaxObj(){
var httprequest=false
if (window.XMLHttpRequest)
{ // if Mozilla, Safari etc
httprequest=new XMLHttpRequest()
if (httprequest.overrideMimeType)
httprequest.overrideMimeType('text/xml')
}
else if (window.ActiveXObject)
{ // if IE
try {
httprequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
httprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return httprequest
}
//Our XmlHttpRequest object to get the auto suggest
var searchReq = createAjaxObj();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
if (searchReq.readyState == 4 || searchReq.readyState == 0) {
var str = escape(document.getElementById('txtSearch').value);
searchReq.open("GET", 'search?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}
}
//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById('search_suggest')
ss.innerHTML = '';
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;
}
}
}
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
document.getElementById('txtSearch').value = value;
document.getElementById('search_suggest').innerHTML = '';
}
当输入框出发Onkeyup事件就发送请求
<html>
<head>
<style type="text/css" media="screen">
body {
font: 11px arial;
}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
}
</style>
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
</head>
<body>
<h3>Simple AJAX Search Suggest</h3>
<div style="width: 500px;">
<form id="frmSearch" action="">
<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />
<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
<div id="search_suggest">
</div>
</form>
</div>
</body>
</html>
xml配置文件:配置请求url
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>search</servlet-name>
<servlet-class>book.suggest.SearchSuggest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>search</servlet-name>
<url-pattern>/search</url-pattern>
</servlet-mapping>
</web-app>
分享到:
相关推荐
search-suggest 可快速创建你的搜索提示功能 /搜索自动补全功能。功能说明把句子分词后缓存转换成拼音缓存把句子分词后缓存当你输入英文 或者中文的时候,可以从缓存里获取匹配值返回使用 标签:search
内容索引:脚本资源,Ajax/JavaScript,输入提示 一款Suggest搜索提示插件,暗藏有淘宝首页、有啊首页、Google搜索首页、来点广告搜索的众多下拉提示,实际上演示效果与其真实网站上的相关无几,使用了Yahoo网站的一个...
AJAX实现类Google Suggest效果 *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://www.okajax.com/demo/suggest/ *:文件结构: index.htm:首页,展现效果 ajax_result.asp:ajax调用后台返回结果文件 result.asp:...
用AJAX实现类似GOOGLE搜索框的功能
自己改的一个简易Google Suggest搜索提示 功能可能不是很完善,有什么建议给我提下 staoml@qq.com
文本框Input文字自动完成Suggest提示插件,一款Suggest搜索提示插件,暗藏有淘宝首页、有啊首页、Google搜索首页、来点广告搜索的众多下拉提示,实际上演示效果与其真实网站上的相关无几,使用了Yahoo网站的一个搜索...
淘宝发布开源编辑器:...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件,目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件。
好东西能用,我经常用!大家共享!
该脚本功能很强大,类似google的自动完成。 使用了cache 功能,当敲入的字符数可以在cache中查到时,将不会向服务器发送请求。减轻服务器压力 使用空格匹配,一个空格字符相当于1个或多个字符(串),可以自己写简单...
csdn中最近又好几个兄弟提这个问题,偶在这里把它贴出来了 需要的下拉 该打包程序运行在vs2005下,只需要简单改一下web.config中数据库链接即可运行。
搜索提示 searchsuggest JSONSuggestBox autocomplete 采用jquery 完美
实现了类似google的搜索提示效果。
servlet+ajax搜索提示。 仿Google Suggest,使用ajax技术实现动态获取搜索提示的功能,当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。
KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让...目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。
利用suggest framework你可以在自己的网站上很轻松实现“输入提示”效果,这种效果会很大程度上提高用户体验,提高搜索效率。 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置。 此框架无浏览器限制,...
Google公司推出的Google suggest服务可实现简单的搜索功能,当在搜索框中输入要搜索的词时,Google会给出一些相关搜索词的提示,然后可以通过光标移动来定位,同时还会统计相应结果的数量,这便是通过Ajax实现的。...
Jquery autocomplete 模糊搜索 模仿Google 百度,虽然说还是有些问题,不过已经很好了,使用.NET 与后台进行交互
相当于谷歌的模糊搜索,用javascript 结全 ajax 组合成的技术
自定义一个简单的搜索提示功能的用户控件,类似google suggest