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


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


    这个例子有代码文件,需要的朋友可以留下mail。

    最近补充:

    原来的代码由于格式化硬盘已经不在了,对不起各位了!但是通过上面的例子希望大家可以做出来,再次感谢大家的访问!

  • 相关阅读:
    Vue.js的组件化思想--下
    Vue.js的组件化思想--上
    Git常用命令总结
    vue基础语法
    ES6基础语法
    Vue笔记
    Vue的基本使用(一)
    es6的基本用法
    Django-admin管理工具
    Django组件-中间件
  • 原文地址:https://www.cnblogs.com/kay/p/872643.html
Copyright © 2020-2023  润新知