使用SuggestFrameWork开发类似百度搜索提示效果

百度以及迅雷的搜索提示效果让人用着很舒服，网络上面也有很多类似的效果，但是都是复杂的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  数组的动态页。action会携带两个参数 q 输入的词，type input框的name属性

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  正常选项