jquery自动填充(输入提示)

主要内容

自动填充效果，热词分表检索，热词分表保存

适用情况及影响

自动填充功能可以改善用户体验，为用户提供输入提示，减少敲击键盘次数，但改善用户体验的前提是用户输入的重复度，输入重复度越高用户体验越好，在改善用户体验的同时也给系统带来了副作用，增加了服务器的访问压力，如果输入重复度不是很高不建议使用自动填充功能。

自动填充原理

 

 

 

使用ajax的异步通信功能将用户的输入发送到应用服务器，应用服务器将用户的输入和热词库中的热词匹配，将匹配的热词返回到客户端，用户提交输入时将输入保存热词库，若热词库中已经有此热词则将热词热度加1。

 

第三方包

jquery自动填充插件

1、  下载地址: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

2、  文档地址: http://docs.jquery.com/Plugins/Autocomplete

3、  限制: jQuery 1.2.6+

4、  在下载包中有相关例子可以参考

 

代码实现

客户端实现

Jsp文件头:

(jquery库)

<script type="text/javascript" src="<%= /jquery.js"></script>

(自动填充插件)

<script type='text/javascript' src='<%= /jquery.autocomplete.js'></script>

(自动填充css文件，可以在jquery自动填充插件包的实例中找到)

<link rel="stylesheet" type="text/css" href="<%= /jquery.autocomplete.css" />

 

自定义javascript:

<script type="text/javascript">

$().ready(function() {

$("#suggest1").autocomplete("http://172.23.38.161:8080/JQueryAjaxDemo/autocomplete(服务端异步通信地址)", {

minChars: 0,

max: 5,

       autoFill: true,

       mustMatch: false,

       matchContains: false,

       scrollHeight: 220,

       formatItem: function(data, i, total) {

           return data[0];

       },

(‘heatWordTypeCode’为热词库关键字,’ state’为热词库代码,’ extraParams’为ajax异步通信传递的额外信息，多个信息使用’,’分隔)

       extraParams:{heatWordTypeCode:'state',focus:5}   });

});

 

</script>

详细解释见jquery自动填充插件文档。

 

Form定义:

<form autocomplete="off" method="post" action="省略">

(本jsp文件包含的热词及其所属的热词库，’ focusSave’为关键字不可改变，为过滤热词而定义，’ name1:state’为input标签的名称:热词库代码)

    <input type="hidden" name="focusSave" value="name1:state"/>

       <p>

           <label>Single City (local):</label>

           <input type="text" name="name1" id="suggest1" />

       </p>

       <input type="submit" value="Submit" />

    </form>

服务端实现

类AutoCompleteServlet

此类为和前端通信的服务端servlet.

public class AutoCompleteServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

           throws ServletException, IOException {

       doPost(request, response);

    }

 

    public void doPost(HttpServletRequest request, HttpServletResponse response)

           throws ServletException, IOException {

       response.setContentType("text/html");

       PrintWriter out = response.getWriter();

       //客户端输入的热词,’q’为关键字不可改变

       String word=request.getParameter("q");

        //返回给客户端的匹配热词个数,’limit’为关键字不可改变

       String limit=request.getParameter("limit");

       //’heatWordTypeCode’为关键字不可改变,标识热词库代码

       String  heatWordTypeCode=request.getParameter("heatWordTypeCode");

       try {

           Integer num=null;

           if(limit!=null||!limit.equals(""))

           {

              num=Integer.valueOf(limit);

           }

            //自定义服务类,可根据需要自行定义

           HeatWordService service=new HeatWordService();

           //根据客户端请求匹配热词

           List<String> heatWords=service.listHeatWord(word,num,heatWordTypeCode);

           for(String heatWord:heatWords)

           {

                //将热词输出到客户端页面

              out.println(heatWord);

           }

       } catch (Exception e){

           // TODO Auto-generated catch block

           e.printStackTrace();

       }  }

}

 

类FocusFilter

此类是一个过滤用户请求的过滤器,当发现’ focusSave’关键字时过滤用户请求,将用户提交的热词保存到热词库中

public class FocusFilter implements javax.servlet.Filter{

    private HeatWordService service=null;

    public void destroy() {

       // TODO Auto-generated method stub

      

    }

 

    public void doFilter(ServletRequest request, ServletResponse response,

           FilterChain chain) throws IOException, ServletException {

       //对应页面的关键字,格式:热词名(input属性名):热词类别,热词名(input属性名):热词类别,热词名(input属性名):热词类别

       String focusSave=request.getParameter("focusSave");

       if(focusSave!=null&&focusSave.length()>1)

       {

           String[]focuses=focusSave.split(",");

           for(String focus:focuses)

           {

              String[]item=focus.split(":");

              //根据input属性名获得热词值

              String value=request.getParameter(item[0]);

              try {

                    //如果热词在热词库中不存在保存热词，热词初始化热度为一，当热词存在热度加一

                  service.insertHeatWord(value, item[1]);

              } catch (Exception e) {

                  // TODO Auto-generated catch block

                  e.printStackTrace();

              }

           }

       }

       chain.doFilter(request, response);

    }

 

    public void init(FilterConfig filterConfig) throws ServletException {

       // TODO Auto-generated method stub

       service=new HeatWordService();

    }

 

Web.xml配置

<!-过滤器配置->

<filter-name>focusFilter</filter-name>

       <filter-class>com.sun.test.FocusFilter</filter-class>

    </filter>

    <filter-mapping>

       <filter-name>focusFilter</filter-name>

       <url-pattern>*</url-pattern>

    </filter-mapping>

<!-servlet配置->

  <servlet>

    <servlet-name>AutoCompleteServlet</servlet-name>

    <servlet-class>com.sun.test.AutoCompleteServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>AutoCompleteServlet</servlet-name>

    <url-pattern>/autocomplete</url-pattern>

  </servlet-mapping>

 

数据结构

热词类别  heatWordType
列名	类型	描述
heatWordTypeCode	Varchar(20)	类别代码,主键
heatWordTable	Varchar(20)	热词表名
heatWordTypeDesc	Varchar(50)	描述

 

 

 

某热词表  oneHeatWord
列名	类型	描述
heatWord	Varchar(50)	热词，主键
heatDegree	int	热度
updateDatetime	datetime	更新时间
heatWordDesc	Varchar(50)	描述

注意:

Sql 中关键字like当替换符’%’在结束位置时可以使用索引，替换符’%’在开始位置时不能使用索引。

摘自：http://suntengjiao1.blog.163.com/blog/static/992110882011102845149944/