使用DWR实现搜索自动提示(三)

事件处理类

js 代码

//控制器类
TextSuggestKeyHandler = Class.create();

TextSuggestKeyHandler.prototype = {
    //构造方法
   initialize: function( textSuggest,delay ) {
       //TextSuggest类的引用
      this.textSuggest = textSuggest;
      //输入框的引用
      this.input       = this.textSuggest.textInput;
      this.delay     = delay || 0.3;
      this.timer     = null;
      this.lastValue = this.input.value;
      //为输入框增加事件响应机制
      this.addKeyHandling();
   },

   addKeyHandling: function() {
      this.input.onkeyup    = this.keyupHandler.bindAsEventListener(this);
      this.input.onkeydown  = this.keydownHandler.bindAsEventListener(this);
      this.input.onblur     = this.onblurHandler.bindAsEventListener(this);
      if ( this.textSuggest.isOpera )
         this.input.onkeypress = this.keyupHandler.bindAsEventListener(this);
   },
    //按键按下事件响应
   keydownHandler: function(e) {
      var upArrow   = 38;
      var downArrow = 40;

      if ( e.keyCode == upArrow ) {
         this.textSuggest.moveSelectionUp();
         //匹配选中在IE下会报selectRange（）方法中的this.suggestions为空或不是对象 现也不需这功能暂时不用
          //setTimeout( this.selectRange.bind(this), 1 );
      }
      else if ( e.keyCode == downArrow ){
         this.textSuggest.moveSelectionDown();
      }
   },
    //放开按键事件响应
   keyupHandler: function(e) {
      if ( this.input.length == 0 && !this.isOpera )
            this.textSuggest.hideSuggestions();
       if ( !this.handledSpecialKeys(e) ){
        if(this.lastValue == this.input.value){
            return;
          }
        if(this.timer){
            clearTimeout(this.timer);
         }
        this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);
        this.lastValue = this.input.value;
     }
   },

   onTimerEvent: function(){
      this.timer = null;
      this.textSuggest.handleTextInput();
   },

    //处理特殊按键
   handledSpecialKeys: function(e) {
      var iKeyCode  = e.keyCode;
      var enterKey  = 13;
      var upArrow   = 38;
      var downArrow = 40;
      if ( iKeyCode == upArrow ||iKeyCode == downArrow ) {
         return true;
      }else if ( iKeyCode == enterKey ) {
          //回车则set入数据
         this.textSuggest.setInputFromSelection();
         return true;
      }
      if ((iKeyCode!=8 && iKeyCode < 32) || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)){
         return true;
      }
      return false;
   },
    //匹配选中
   selectRange: function() {
      var suggestion  = this.suggestions[ this.selectedIndex ].districtName;
      var iStart = this.input.value.length;
      var iEnd   = suggestion.length;
       //check for support of typeahead functionality
    if (this.input.createTextRange){
        this.input.value = suggestion;
        var oRange = this.input.createTextRange();
        oRange.moveStart("character", iStart);
        oRange.moveEnd("character",  suggestion.length- this.input.value.length);
        oRange.select();

    //use setSelectionRange() for Mozilla
    } else if (this.input.setSelectionRange) {
        this.input.setSelectionRange(iStart, iEnd);
    }
    //set focus back to the textInput
    this.input.focus();

   },
    //失去焦点事件响应
   onblurHandler: function(e) {
      if ( this.textSuggest.suggestionsDiv.style.display == '' )
      //如果当前输入是显示的，那么点击其他地方应该把选择值注入输入框
         this.textSuggest.setInputFromSelection();
      this.textSuggest.hideSuggestions();
   }

};

 

使用freemarker封装，使其成为组件，在需要的地方能方便的使用。autocomplete.ftl如下：通过dwrmethod参数将要使用的service方法传入前端处理程序。一并传入的还有显示样式

js 代码

<#include "/${parameters.templateDir}/simple/text.ftl" />
<script type="text/javascript">
  var suggestOptions = {
         //层样式
         suggestDivClassName: ${parameters.suggestDivClassName ? default("'suggestDiv'")},
         //选项样式
         suggestionClassName: ${parameters.suggestionClassName ? default("'suggestion'")},
         //匹配样式
         matchClassName     : ${parameters.matchClassName ? default("'match'")},
         //是否匹配输入框宽度
         matchTextWidth     : ${parameters.matchTextWidth ? default('true')},
         //选项颜色
         selectionColor     : ${parameters.selectionColor ? default("'#FFB55E'")},
          //是否从头匹配
         matchAnywhere      : ${parameters.matchAnywhere ? default('false')} ,
         //是否忽略大小写
         ignoreCase         : ${parameters.ignoreCase ? default('false')},
         //显示数目
         count              : ${parameters.count ? default(10)},
         //隐藏字段的Id
         hiddenId         : ${parameters.hiddenId ? default('')}
      };
   new TextSuggest('${parameters.id}',${parameters.dwrMethod}, suggestOptions);
</script>

分享到：

Subversion的配置和使用说明 | 使用DWR实现搜索自动提示(二)

• 2007-06-28 21:59
• 浏览 2426
• 评论(0)
• 查看更多

相关推荐

DWR实现Google自动提示功能

在这个实例中，“DWR实现Google自动提示功能”是利用DWR框架来构建一个类似于Google搜索框的自动提示功能，用户在输入框中输入时，后台会实时地根据输入内容提供相关的建议，无需页面刷新。 一、DWR框架详解： DWR...

搜索自动提示列表的dwr实现实例

3. **DWR实现搜索提示的步骤** - **创建Java后台服务**：首先，你需要在Java后端编写一个服务接口，该接口接收用户的输入并返回相关的搜索建议。这可能涉及到数据库查询或者其他数据源的操作。 - **配置DWR**：在...

搜索提示框的自动显示dwr实现实例

在这个“搜索提示框的自动显示DWR实现实例”中，我们将探讨如何利用DWR技术创建一个智能、高效的搜索输入框，当用户输入时，自动显示相关建议，提升用户体验。 首先，我们需要理解DWR的基本工作原理。DWR通过在后台...

dwr实现局部刷新

4. **AutoComplete**：DWR提供了自动完成功能，用于在客户端输入框中动态提示可能的匹配项，例如在搜索框中输入内容时显示建议列表。 5. **Echo**：DWR的Echo功能允许在后台执行长时间的任务，同时保持与客户端的...

dwr实现聊天室+级连+搜索提示

在这个“dwr实现聊天室+级连+搜索提示”的项目中，我们将探讨以下几个关键知识点： 1. **DWR聊天室实现**： 聊天室的实现通常涉及客户端和服务器端的实时数据交换。DWR通过创建JavaScript对象（Callee）来映射...

纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果

本示例主要展示了如何使用纯JSP和Direct Web Remoting (DWR)技术来构建一个功能丰富的用户界面，其中包括三级联动下拉选择菜单、无刷新联动、用户存在性判断以及模拟Google搜索效果的功能。DWR是一种JavaScript库，...

Ajax dwr框架实现自动补全功能

在本文中，我们将深入探讨如何使用Ajax、Direct Web Remoting (DWR) 框架以及Hibernate ORM工具来实现一个自动补全功能。这个功能类似于百度搜索引擎中的输入提示，能够根据用户输入的字符动态地提供可能的搜索建议...

基于JQuery和DWR的自动补全

综上所述，结合JQuery和DWR实现的自动补全功能，不仅提升了用户输入体验，也为开发者提供了一种高效的数据交互手段。在实际开发中，可以根据项目需求灵活调整和优化，以达到最佳效果。在压缩包文件"buquan"中可能...

DWR框架实用案例

一旦服务器完成查询，它会将结果返回给客户端，DWR会自动将这些数据更新到页面的JavaScript变量中，从而实现在用户输入过程中动态更新下拉提示列表。 实现这个功能的具体步骤包括： 1. **配置DWR**：在Web应用中...

DWR 含架包

3. **AutoComplete**: DWR支持自动完成功能，常用于输入框中智能提示，如搜索建议等。 4. **CORS（Cross-Origin Resource Sharing）**: DWR支持跨域资源共享，允许来自不同源的HTTP请求访问同一资源，扩展了Web应用...

Dwr+AutoComplete+pinyin4j 自动匹配（中文，拼音）

标题 "Dwr+AutoComplete+pinyin4j 自动匹配（中文，拼音）" 提到的技术栈涉及了三个关键部分：DWR（Direct Web Remoting）、AutoComplete（自动完成）和pinyin4j。这些技术在Web开发中都有特定的应用场景。 DWR是一...

dwr开发指南(中文)

- **AutoComplete**：提供自动完成功能，常用于搜索框，根据用户输入的字符动态提示可能的匹配项。 - **Remote JavaScript**：允许在服务器端生成并执行JavaScript代码，进一步增强了动态性。 4. **DWR的安装与...

dwr官方资料和搜集资料大全

Direct Web Remoting (DWR) 是一个开源Java库，它允许JavaScript在Web浏览器中与服务器端的Java对象进行交互，从而实现动态、实时的Web应用。这个“dwr官方资料和搜集资料大全”包含了丰富的资源，帮助开发者深入...

DWR框架开发详解从入门到精通

- **AutoComplete**：DWR提供了自动完成功能，常用于搜索框的智能提示。 在深入学习DWR的过程中，你可能还会遇到如何处理异步调用、错误处理、性能优化等方面的问题。通过阅读"DWR框架开发详解从入门到精通"这本书...

ajax常用框架集

- **Auto-Complete**：DWR提供了自动完成功能，常用于搜索框的实时提示。 2. **DWR的工作原理** - **Reverse Ajax**：DWR利用了HTTP长连接，使得服务器可以主动向客户端推送数据。 - **JavaScript与Java的映射**...

几行代码的二级联动和类似goolge的输入下拉提示

而"类似Google的输入下拉提示"则是指搜索引擎或输入框在用户输入时，根据输入内容动态展示相关建议，这种功能在很多网站和应用中都有广泛的应用，能够快速引导用户找到他们可能想要搜索的内容。 DWR（Direct Web ...

快速输入地址

标题“快速输入地址”可能指的是在网页应用中实现快速、自动完成的地址输入功能，这通常涉及到JavaScript和服务器端的交互。在这个场景下，DWR（Direct Web Remoting）可能是被使用的工具，它是一个开源Java框架，...

像google的文本框的ajax例子

标题 "像Google的文本框的Ajax例子" 涉及的是使用Ajax技术来实现类似Google搜索框的实时提示功能。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过...

网上书前台管理系统店

3. **MyEclipse**：这是一个强大的Java EE集成开发环境，基于Eclipse，支持Web、Java、.NET等多种开发，提供了丰富的代码提示、自动完成、调试等功能，便于开发者高效编码。 4. **Struts框架**：Apache组织开发的...