`

（转）自动补全

ServletjQueryCSSXMLAjax 
阅读更多
Servlet代码 复制代码
  1. /**   
  2.  * Servlet   
  3.  */   
  4. package com.wll.autoComplete;   
  5.   
  6. import java.io.IOException;   
  7.   
  8. import javax.servlet.ServletException;   
  9. import javax.servlet.http.HttpServlet;   
  10. import javax.servlet.http.HttpServletRequest;   
  11. import javax.servlet.http.HttpServletResponse;   
  12.   
  13. /**   
  14.  * 自动补全功能   
  15.  * 接收用户端请求   
  16.  * @author wll   
  17.  *   
  18.  */   
  19. public class AutoComplete extends HttpServlet {   
  20.     protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {   
  21.         //表示页面传过来的字符串，用于和服务器端的单词进行完整匹配   
  22.         String word = request.getParameter("word");   
  23.         //将字符串保存在request对象中   
  24.         request.setAttribute(Contants.PARAM, word);   
  25.         //将请求转发给视图层(注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作是一个数据层)   
  26.         request.getRequestDispatcher("wordxml.jsp").forward(request, response);   
  27.     }   
  28.     protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {   
  29.         doGet(request,response);   
  30.     }   
  31. }  
/**
 * Servlet
 */
package com.wll.autoComplete;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 自动补全功能
 * 接收用户端请求
 * @author wll
 *
 */
public class AutoComplete extends HttpServlet {
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
		//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
		String word = request.getParameter("word");
		//将字符串保存在request对象中
		request.setAttribute(Contants.PARAM, word);
		//将请求转发给视图层(注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作是一个数据层)
		request.getRequestDispatcher("wordxml.jsp").forward(request, response);
	}
	protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);
	}
}

 

常量类代码 复制代码
  1. /**   
  2.  *    
  3.  */   
  4. package com.wll.autoComplete;   
  5.   
  6. /**   
  7.  * 常类   
  8.  *    
  9.  * @author wll   
  10.  *    
  11.  */   
  12. public class Contants {   
  13.     public static final String PARAM = "param";   
  14.   
  15.     private Contants() {   
  16.   
  17.     }   
  18. }  
/**
 * 
 */
package com.wll.autoComplete;

/**
 * 常类
 * 
 * @author wll
 * 
 */
public class Contants {
	public static final String PARAM = "param";

	private Contants() {

	}
}

 

Jsp代码 复制代码
  1. <%@ page language="java" import="java.util.*"  
  2.  pageEncoding="utf-8"%>   
  3.   
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  5. <html>   
  6.   <head>   
  7.     <title>JQuery自动补全</title>   
  8.  <script type="text/javascript" src="js/jquery.js"></script>   
  9.     <script type="text/javascript" src="js/jqueryAuto.js"></script>   
  10.   </head>   
  11.      
  12.   <body>   
  13.     JQuery实例-自动补全：<input type="text" id="word" name="word" />   
  14.     <input type="button" id="buttonSubmit"  
  15.      name="buttonSubmit" value="提交" /><br />   
  16.     <div id="auto"></div>   
  17.   </body>   
  18. </html>  
<%@ page language="java" import="java.util.*"
 pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JQuery自动补全</title>
 <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jqueryAuto.js"></script>
  </head>
  
  <body>
    JQuery实例-自动补全：<input type="text" id="word" name="word" />
    <input type="button" id="buttonSubmit"
     name="buttonSubmit" value="提交" /><br />
  	<div id="auto"></div>
  </body>
</html>

 

输出结果的xml代码 复制代码
  1. <!-- ajax自动补全实例 -->   
  2. <!-- 与传统应用的视图层不同，这个jsp返回的是xml数据，因此contentType值是text/xml -->   
  3. <%@ page language="java" contentType="text/xml;charset=utf-8" %>   
  4. <%@page import="com.wll.autoComplete.Contants,java.util.*"%>   
  5. <!-- 返回xml数据的'视图层暂时不做任何逻辑判断，先所有单词都返回，   
  6. 待前后台应用可以完整的协作之后 ，再限制返回的内容' -->   
  7. <%   
  8.     //页面传送的字符串   
  9.     String word = (String)request.getAttribute(Contants.PARAM);   
  10.     List list = new ArrayList();   
  11.     list.add("absolute");   
  12.     list.add("anyone");   
  13.     list.add("apple");   
  14.     list.add("abandon");   
  15.     list.add("breach");   
  16.     list.add("break");   
  17.     list.add("bad");   
  18.     list.add("char");   
  19.     list.add("create");   
  20.     list.add("delete");   
  21.     list.add("java");   
  22.     list.add("attribute");   
  23. %>   
  24. <words>   
  25.     <%   
  26.     for(int i = 0;i < list.size();i ++) {   
  27.     if(list.get(i).toString().startsWith(word)) {%>   
  28.         <word><%=list.get(i)%></word>   
  29.     <%}}%>   
  30. </words>  
<!-- ajax自动补全实例 -->
<!-- 与传统应用的视图层不同，这个jsp返回的是xml数据，因此contentType值是text/xml -->
<%@ page language="java" contentType="text/xml;charset=utf-8" %>
<%@page import="com.wll.autoComplete.Contants,java.util.*"%>
<!-- 返回xml数据的'视图层暂时不做任何逻辑判断，先所有单词都返回，
待前后台应用可以完整的协作之后 ，再限制返回的内容' -->
<%
	//页面传送的字符串
	String word = (String)request.getAttribute(Contants.PARAM);
	List list = new ArrayList();
	list.add("absolute");
	list.add("anyone");
	list.add("apple");
	list.add("abandon");
	list.add("breach");
	list.add("break");
	list.add("bad");
	list.add("char");
	list.add("create");
	list.add("delete");
	list.add("java");
	list.add("attribute");
%>
<words>
	<%
	for(int i = 0;i < list.size();i ++) {
	if(list.get(i).toString().startsWith(word)) {%>
		<word><%=list.get(i)%></word>
	<%}}%>
</words>

 

Web.xml代码 复制代码
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2. <web-app version="2.4"    
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"    
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee    
  6.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">   
  7.        
  8.   <servlet>   
  9.     <servlet-name>AutoComplete</servlet-name>   
  10.     <servlet-class>com.wll.autoComplete.AutoComplete</servlet-class>   
  11.   </servlet>   
  12.   <servlet-mapping>   
  13.     <servlet-name>AutoComplete</servlet-name>   
  14.     <url-pattern>/autoComplete</url-pattern>   
  15.   </servlet-mapping>   
  16.      
  17.   <welcome-file-list>   
  18.     <welcome-file>index.jsp</welcome-file>   
  19.   </welcome-file-list>   
  20. </web-app>  
<?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>AutoComplete</servlet-name>
  	<servlet-class>com.wll.autoComplete.AutoComplete</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>AutoComplete</servlet-name>
  	<url-pattern>/autoComplete</url-pattern>
  </servlet-mapping>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 

Js 代码代码 复制代码
  1. //表示当前高亮的节点   
  2. var highlightindex = -1;   
  3. var timeoutId;   
  4. $(document).ready(function(){   
  5.     var wordInput = $('#word');   
  6.     var wordInputOffset = wordInput.offset();   
  7.     //自动补全框最开始应该隐藏起来   
  8.     $('#auto').hide().css('border','1px black solid');   
  9.     //设置div的位置   
  10.     $('#auto').css('position','absolute');   
  11.     $('#auto').css('top',wordInputOffset.top + wordInput.height() + 5 + 'px');   
  12.     $('#auto').css('left',wordInputOffset.left + 'px');   
  13.     $('#auto').width(wordInput.width() + 6);   
  14.        
  15.     //给文本框添加键盘按下并弹起事件   
  16.     wordInput.keyup(function(event) {   
  17.         //处理文本框的键盘事件   
  18.         var myEvent = event || window.event;   
  19.         var keyCode = myEvent.keyCode;   
  20.         //如果输入的是字母，应该将文本框中最新的信息发送给服务器端   
  21.         //如果输入的是退格键或删除键，也应该像文本框中的最新信息发送给服务器端   
  22.         if(keyCode >= 65 && keyCode <=90 || keyCode == 8 ||keyCode == 46) {   
  23.             //1.首先获取文本框中的内容   
  24.             var wordText = $('#word').val();   
  25.             // 取得auto结点   
  26.             var autoNode = $('#auto');   
  27.             if(wordText != '') {   
  28.                 //对上次未完成的延时操作进行取消   
  29.                 clearTimeout(timeoutId);   
  30.                 //对于服务器端进行交互延迟500ms,避免快速打字造成的频繁请求   
  31.                 timeoutId = setTimeout(function(){   
  32.                     //2.将文本框中的内容发送给服务器   
  33.                     $.post("autoComplete",{   
  34.                     word:wordText   
  35.                     },function(data){   
  36.                         //将dom对象data转换成JQuery的对象   
  37.                         var jqueryObj = $(data);   
  38.                         //找到所有的word节点   
  39.                         var wordNodes = jqueryObj.find('word');   
  40.                            
  41.                         //需要清空原来的内容   
  42.                         autoNode.html('');   
  43.                         //遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中   
  44.                         wordNodes.each(function(i){   
  45.                             //获取单词内容   
  46.                             var wordNode = $(this);   
  47.                             //新建div节点   
  48.                             //将新建的节点加入到弹出框的节点中    
  49.                             var newDivNode = $('<div>').attr('id',i);   
  50.                             newDivNode.html(wordNode.text()).appendTo(autoNode);   
  51.                             //增加鼠标进入事件，高亮节点   
  52.                             newDivNode.mouseover(function(){   
  53.                                 //将原来高亮的节点取消高亮   
  54.                                 if(highlightindex != -1) {   
  55.                                     $('#auto').children('div').eq(highlightindex)   
  56.                                     .css('background-color','white');   
  57.                                 }   
  58.                                 //记录新的高亮索引   
  59.                                 highlightindex = $(this).attr('id');   
  60.                                 //鼠标进入的节点高亮   
  61.                                 $(this).css('background-color','red');   
  62.                             });   
  63.                             //增加鼠标移出事件，取消高亮节点   
  64.                             newDivNode.mouseout(function(){   
  65.                                 $(this).css('background-color','white');   
  66.                             });   
  67.                             //增加鼠标点击事件，可以进行补全   
  68.                             newDivNode.click(function(){   
  69.                                 //取出高亮节点的文本内容   
  70.                                 var comText = $(this).text();   
  71.                                 $('#auto').hide();   
  72.                                 highlightindex = -1;   
  73.                                 //将文本框中的内容变成高亮节点的内容   
  74.                                 $('#word').val(comText);   
  75.                             });   
  76.                         });   
  77.                         //如果服务器端有数据返回，则显示弹出框   
  78.                         if(wordNodes.length > 0) {   
  79.                             autoNode.show();   
  80.                         } else {   
  81.                         //如果服务器端没有数据返回   
  82.                             autoNode.hide();   
  83.                         }   
  84.                     },   
  85.                     'xml');   
  86.                 },500);   
  87.             } else {   
  88.                 autoNode.hide();   
  89.                 //弹出框隐藏的同时，高亮节点索引值也置成-1  
  90.                 highlightindex = -1;   
  91.             }   
  92.         } else if(keyCode == 38 || keyCode == 40) {   
  93.             //如果输入的是向上38向下40按键   
  94.             if (keyCode == 38) {   
  95.                 //向上   
  96.                 var autoNodes = $('#auto').children('div');   
  97.                 if(highlightindex != -1) {   
  98.                     //如果存在高亮节点，则将背景色改为白色   
  99.                     autoNodes.eq(highlightindex).css('background-color','white');   
  100.                     highlightindex = highlightindex - 1;   
  101.                 } else {   
  102.                     highlightindex = autoNodes.length - 1;   
  103.                 }   
  104.                    
  105.                 if(highlightindex == -1) {   
  106.                     //如果修改索引值以后index变成-1，则将索引值指向最后一个元素   
  107.                     highlightindex = autoNodes.lenght - 1;   
  108.                 }   
  109.                 //让现在的高亮的内容变成红色   
  110.                 autoNodes.eq(highlightindex).css('background-color','red');   
  111.             }   
  112.             if (keyCode == 40) {   
  113.                 //向下   
  114.                 var autoNodes = $('#auto').children('div');   
  115.                 if(highlightindex != -1) {   
  116.                     //如果存在高亮节点，则将背景色改为白色   
  117.                     autoNodes.eq(highlightindex).css('background-color','white');   
  118.                 }   
  119.                 highlightindex = highlightindex + 1;   
  120.                 if(highlightindex == autoNodes.length) {   
  121.                     //如果修改索引值以后index变成-1，则将索引值指向最后一个元素   
  122.                     highlightindex = 0;   
  123.                 }   
  124.                 //让现在的高亮的内容变成红色   
  125.                 autoNodes.eq(highlightindex).css('background-color','red');   
  126.             }   
  127.                
  128.         } else if(keyCode == 13) {   
  129.             //如果输入的是回车   
  130.                
  131.             //下拉框有高亮内容   
  132.             if(highlightindex != -1) {   
  133.                 //取出高亮节点的文本内容   
  134.                 var comText = $('#auto').hide().children('div')   
  135.                 .eq(highlightindex).text();   
  136.                 highlightindex = -1;   
  137.                 //将文本框中的内容变成高亮节点的内容   
  138.                 $('#word').val(comText);   
  139.             } else {   
  140.                 //下拉框无高亮内容   
  141.                 alert('没有选择高亮内容');   
  142.                 $('#auto').hide();   
  143.                 //让文本框失去焦点   
  144.                 $('#word').get(0).blur();   
  145.             }   
  146.         }   
  147.     });   
  148.        
  149.     //给按钮添加事件，表示文本框中的数据被提交$("input[type]='button']")   
  150.     $('#buttonSubmit').click(function(){   
  151.         alert('文本框中的【' + $('#word').val() + '】被提交了');   
  152.     }) ;   
  153.        
  154. });  
分享到：
| 配置Spring+hibernate使用ehcache作为seco ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    中文拼写自动补全

    **中文拼写自动补全** 在信息技术领域，中文输入法的拼写自动补全功能是一项重要的用户体验提升技术。它能够帮助用户快速、准确地输入文本，尤其对于输入速度较慢或者不太熟悉汉字输入的用户来说，这个功能尤为重要...

    Elasticsearch实现检索词自动补全(检索词补全，自动纠错，拼音补全，繁简转换) 包含demo

    在实际应用中，用户输入的检索词往往可能存在拼写错误、不完整或者使用了同义词等情况，为了提高用户体验和搜索准确性，Elasticsearch 提供了多种功能来支持检索词的自动补全、自动纠错、拼音补全以及繁简转换。...

    java实现自动补全功能

    在Java开发中，实现自动补全功能是一种常见的需求，特别是在Web应用中，它可以极大地提高用户输入的效率和体验。这个项目使用了Java后端技术和AJAX前端技术来完成这一功能。接下来，我们将深入探讨如何利用Java和...

    C#ComboBox自动补全小技巧

    然而，为了提供更友好的用户体验，有时我们需要为ComboBox添加自动补全功能，使得用户在输入时能快速匹配并选择合适的选项。本篇文章将深入探讨如何实现C# ComboBox的自动补全特性，以及在实际项目中积累的一些实用...

    Ajax自动补全功能

    ### Ajax自动补全功能 #### 一、简介 在现代Web开发中，为了提升用户体验，很多网站都会使用Ajax技术来实现实时性更强的功能，比如搜索框中的自动补全功能。通过Ajax技术，用户在输入搜索关键词的过程中，系统就...

    jQuery实现自动补全功能

    "jQuery实现自动补全功能"是一个常见的需求，特别适用于搜索框或者输入字段，以提高用户体验。自动补全功能允许用户在输入时提供预设的建议，从而快速找到他们可能正在寻找的内容。 jQuery的自动补全功能主要依赖于...

    java 实现百度搜索框自动补全

    Java 实现百度搜索框自动补全是一个常见的前端与后端交互功能，主要用于提高用户体验，它在用户输入关键字时提供相关的建议列表。这个源码演示了如何利用Ajax技术结合MySQL数据库来实现这一功能。 首先，我们要理解...

    MyBatis和IBatis配置文件中的自动补全功能

    本文将深入探讨如何在MyBatis和iBatis的配置文件中启用自动补全功能，以提高开发效率。 首先，我们来看`sql-map-2.dtd`和`sql-map-config-2.dtd`这两个文件，它们是iBatis时代的配置文件DTD（Document Type ...

    更强的自动补全提示：提示补全组件：Kissy Suggest（转）

    在IT行业中，自动补全功能已经成为了开发人员和用户日常工作中不可或缺的一部分，它极大地提高了代码编写和信息搜索的效率。本文将重点介绍一种强大的自动补全提示组件——Kissy Suggest，它是一个基于JavaScript的...

    C#自动补全，简单的补全，Jquery

    在IT行业中，自动补全（Auto-Completion）是一种常见的功能，尤其在编程环境中，它极大地提高了开发效率。本文将深入探讨C#中的自动补全机制，以及如何利用jQuery实现前端的自动补全功能。 首先，让我们关注C#的...

    Ajax实现类似baidu的自动补全

    在本案例中，我们将探讨如何使用Ajax来实现一个类似百度搜索框的自动补全功能。 首先，我们需要创建一个HTML页面作为用户界面，包含一个输入框和一个隐藏的div，用于显示补全建议。这个输入框将监听用户的输入事件...

    jquery autocomplete自动补全功能实现

    本文将深入探讨如何利用jQuery实现自动补全功能，特别是针对邮箱、城市和中文的自动补全场景。 首先，让我们了解jQuery UI中的Autocomplete插件。这个插件允许开发者基于用户输入的字符动态提供建议列表。要使用它...

    【Android】实现搜索的自动补全功能

    在Android应用开发中，搜索功能是提升用户体验的关键一环，特别是自动补全功能，它可以极大地提高用户输入效率，降低操作难度。本篇文章将详细介绍如何在Android中实现搜索的自动补全功能。 首先，理解自动补全...

    ajax自动补全模糊查询

    **Ajax自动补全模糊查询**是一种常见的前端交互技术，它基于JavaScript的Ajax（异步JavaScript和XML）技术，实现用户在输入框中输入文本时，系统实时从服务器端获取匹配数据并显示为下拉提示，极大地提升了用户体验...

    一款非常使用的英文自能自动补全工具

    一款非常使用的英文自能自动补全工具内置英语现代词库，中英操作界面转换。能自动补全输入的相关词汇，如果不记得该词汇的组成，他能为您提供该词汇的模糊查询，只要匹配该结构的可以给予提示。与该词汇相关的的词组...

    gson + autocomplete.js完成的输入自动补全

    在IT领域，输入自动补全是一项常见的功能，广泛应用于搜索引擎、代码编辑器、表单输入等场景，极大地提高了用户输入的效率和准确性。本项目利用Gson和autocomplete.js这两个库来实现这一功能，但遇到了在Firefox...

    WebService实现自动补全

    【WebService实现自动补全】 在IT领域，自动补全是一种常用的功能，特别是在编程环境中，它极大地提高了开发效率。当我们输入代码时，系统能够预测并提供可能的完成选项，这种技术通常被称为IntelliSense。在本篇...

    android AutoCompleteTextView邮箱后缀自动补全

    本篇文章将深入探讨如何实现这样一个具有自动补全邮箱后缀功能的自定义控件，并结合给定的文件名 `MyEmailAutoCompleteTextView` 分析其可能的实现方式。 首先，我们要了解 `AutoCompleteTextView` 的基本工作原理...

    jQuery 自动补全

    **jQuery 自动补全插件详解** 在网页开发中，为用户提供自动补全功能是一种常见的交互设计，可以提高用户体验，减少用户输入错误。jQuery 自动补全插件（jQuery UI Autocomplete）是实现这一功能的强大工具，它基于...

    jquery版搜索框自动补全，智能提示，可连接数据库（适用于.net,java,php等多种语言）

    **jQuery版搜索框自动补全与智能提示技术详解** 在网页开发中，为了提供用户友好的界面和便捷的搜索体验，经常会用到搜索框自动补全功能。此功能能够根据用户输入的部分关键词，实时显示出匹配的建议结果，极大地...

Magicbox
Global site tag (gtag.js) - Google Analytics