注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

等闲识得东风面,万紫千红总是春!

 
 
 

日志

 
 

利用SuggestFrameWork开发类似Google搜索提示效果  

2008-11-05 14:27:13|  分类: AJAX |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
google以及迅雷的搜索提示效果让人用着很舒服,网络上面也有很多类似的效果,但是都是复杂的ajax,让js不熟练的朋友看着头大,那么SuggestFrameWork就是专门开发这个效果的js库,在页面上引用它,就不用在写繁杂的js代码了。

1.从http://sourceforge.net/projects/suggest上面下载SuggestFrameWork库;

2.SuggestFrameWork的使用很简单,在需要效果的页面上引用这样两行代码:
<script  type="text/javascript"  src="/path/to/SuggestFramework.js"></script>
<script  type="text/javascript">window.onload  =  initializeSuggestFramework;</script>

3.当引入这两句话后,在页面上的text框将拥有5个特殊的属性:
action  必须。接受  GET  方式提交的数据,并返回相关  Javascript  数组的动态页。
capture  如果返回的结果不止一列,将要替换用户输入的那一列(从  1  开始算)。通常这个和数据库字段相对应。可选,默认为  1.
columns  下拉显示的列数。可选,默认为  1.
delay  查询延时,单位为毫秒。较低的延时会得到更快的反应,但会加重服务器负担。可选,默认为  1000(1秒)。
heading  如果设为  true  ,第一个数组值将作为不可选择项(标题栏)。当有两列或两列以上数据时非常有用。可选,默认为  false.
例如:
<input id="example1" type="text" name="example1" action="SeachServlet.do" columns="2" capture="2"/>

4. 我们写一个SeachServlet.do的Servlet来处理请求(为了简单,没有连接数据库):
package com.kay.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SeachServlet
        
extends HttpServlet
{

    
public SeachServlet()
    
{
        
super();
    }


    
public void destroy()
    
{
        
super.destroy(); // Just puts "destroy" string in log
        
// Put your code here
    }

    
public void doGet(HttpServletRequest request, HttpServletResponse response)
            
throws ServletException, IOException
    
{

        PrintWriter out = response.getWriter();
        out.println("new Array(");
        out.println("new Array('Maine', 'd'),");
        out.println("new Array('Maine', ''), ");
        out.println("new Array('Maine', ''), ");
        out.println("new Array('Maine', ''), ");
        out.println("new Array('Maine', ''), ");
        out.println("new Array('Maine', '') ");
        out.println(");");
        out.flush();
        out.close();
    }



    
public void doPost(HttpServletRequest request, HttpServletResponse response)
            
throws ServletException, IOException
    
{

        doGet(request,response);
    }



    
public void init()
            
throws ServletException
    
{
    }


}

这样我们在页面上就可以看到效果了,当然你也可以设置css样式:
.SuggestFramework_List  下拉框窗口
.SuggestFramework_Heading  标题栏
.SuggestFramework_Highlighted  高亮选项
.SuggestFramework_Normal  正常选项
  评论这张
 
阅读(407)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017