js 代码
- TextSuggest = Class.create();
- TextSuggest.prototype = {
- //构造函数
- initialize: function(elementId /*:HTMLInputElementId*/,oProvider /*:SuggestionProvider*/, options/*:cssStyle and display count ect*/) {
- this.id = elementId;
- this.provider = oProvider;
- var browser = navigator.userAgent.toLowerCase();
- this.isIE = browser.indexOf("msie") != -1;
- this.isOpera = browser.indexOf("opera")!= -1;
- this.isMozilla = (browser.indexOf("gecko")!= -1 && browser.indexOf("mozilla")!= -1);
- this.textInput = $(this.id);
- this.suggestions = new Array();
- this.setOptions(options);
- this.injectSuggestBehavior();
- },
- //设置参数
- setOptions: function(options) {
- this.options = {
- //层样式
- suggestDivClassName: 'suggestDiv',
- //选项样式
- suggestionClassName: 'suggestion',
- //匹配样式
- matchClassName : 'match',
- //是否匹配输入框宽度
- matchTextWidth : true,
- //选项颜色
- selectionColor : '#b1c09c',
- //是否从头匹配
- matchAnywhere : false,
- //是否忽略大小写
- ignoreCase : false,
- //显示数目
- count : 10,
- //隐藏字段的Id
- hiddenId : ''
- }.extend(options || {});
- },
- //注入输入提示行为
- injectSuggestBehavior: function() {
- if ( this.isIE ||this.isMozilla){
- this.textInput.setAttribute('autocomplete','off');
- }
- //创建控制器
- var keyEventHandler = new TextSuggestKeyHandler(this);
- //主要是为了避免在按回车的时候把表单提交 目前未能实现
- //new Insertion.After( this.textInput,'' );
- // new Insertion.After( this.textInput,'' );
- //创建div层
- this.createSuggestionsDiv();
- },
- //处理输入信息
- handleTextInput: function() {
- var previousRequest = this.lastRequestString;
- this.lastRequestString =this.textInput.value.replace(/(^\s*)|(\s*$)/g, "");
- if ( this.lastRequestString == "" ||this.lastRequestString.length <=0 ){
- //如果有hidden的变量,要将变量置为空
- if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
- $(this.options.hiddenId).value = "";
- }
- this.hideSuggestions();
- }else if ( this.lastRequestString != previousRequest ){
- //访问数据源
- this.sendRequestForSuggestions();
- }
- },
- //选择框上移
- moveSelectionUp: function() {
- if ( this.selectedIndex > 0 ) {
- this.updateSelection(this.selectedIndex - 1);
- }
- },
- //选择框下移
- moveSelectionDown: function() {
- if ( this.selectedIndex < (this.suggestions.length - 1) ) {
- this.updateSelection(this.selectedIndex + 1);
- }
- },
- //更新当前选择信息
- updateSelection: function(n) {
- var span = $( this.id + "_" + this.selectedIndex );
- if ( span ){
- //消除以前的样式
- span.style.backgroundColor = "";
- }
- this.selectedIndex = n;
- var span = $( this.id + "_" + this.selectedIndex );
- if ( span ){
- //更新新样式
- span.style.backgroundColor = this.options.selectionColor;
- }
- },
- //发送请求
- sendRequestForSuggestions: function() {
- if ( this.handlingRequest ) {
- this.pendingRequest = true;
- return;
- }
- this.handlingRequest = true;
- this.callDWRAjaxEngine();
- },
- //使用DWR访问后台
- callDWRAjaxEngine: function() {
- //清空以前的记录
- if(this.suggestions.length>0){
- this.suggestions = null;
- }
- //保存当前对象指针
- var tempThis = this;
- this.provider(this.lastRequestString,function(ajaxResponse){
- tempThis.suggestions = ajaxResponse;
- if ( tempThis.suggestions.length == 0 ) {
- //如果有hidden的变量,要将变量置为空
- if(tempThis.options.hiddenId != "" && tempThis.options.hiddenId.length >0){
- $(tempThis.options.hiddenId).value = "";
- }
- tempThis.hideSuggestions();
- }else {
- tempThis.updateSuggestionsDiv();
- tempThis.showSuggestions();
- tempThis.updateSelection(0);
- }
- tempThis.handlingRequest = false;
- if ( tempThis.pendingRequest ) {
- tempThis.pendingRequest = false;
- tempThis.lastRequestString = this.textInput.value;
- tempThis.sendRequestForSuggestions();
- }
- });
- },
- //显示信息
- setInputFromSelection: function() {
- var suggestion = this.suggestions[ this.selectedIndex ];
- if(typeof(suggestion) != 'undefined'){
- //如果有hidden的变量,要将变量置赋值
- if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
- $(this.options.hiddenId).value = suggestion.id;
- }
- this.textInput.value = suggestion.districtName;
- }
- this.hideSuggestions();
- },
- //
- getLeft : function () /*:int*/ {
- var oNode = this.textInput;
- var iLeft = 0;
- while(oNode.tagName != "BODY") {
- iLeft += oNode.offsetLeft;
- oNode = oNode.offsetParent;
- }
- return iLeft;
- },
- getTop : function () /*:int*/ {
- var oNode = this.textInput;
- var iTop = 0;
- while(oNode.tagName != "BODY") {
- iTop += oNode.offsetTop;
- oNode = oNode.offsetParent;
- }
- return iTop;
- },
- //显示层
- showSuggestions: function() {
- var divStyle = this.suggestionsDiv.style;
- if( divStyle.display != ''){
- this.positionSuggestionsDiv();
- divStyle.display = '';
- }
- if(isIE){
- //创建与弹出div相同样式的iframe,来修复IE6及以下版本中div不能遮住select控件的bug
- if(!this.iframeSuggestions){
- this.iframeSuggestions = document.createElement("iframe");
- var iframeStyle = this.iframeSuggestions.style;
- iframeStyle.position ='absolute';
- iframeStyle.zIndex = 100;
- iframeStyle.top = divStyle.top;
- iframeStyle.left = divStyle.left;
- iframeStyle.width = divStyle.width;
- iframeStyle.height = this.suggestionsDiv.offsetHeight;
- iframeStyle.display = '';
- this.textInput.parentNode.appendChild(this.iframeSuggestions);
- }
- var iframeStyle = this.iframeSuggestions.style;
- iframeStyle.position ='absolute';
- iframeStyle.zIndex = 100;
- iframeStyle.top = divStyle.top;
- iframeStyle.left = divStyle.left;
- iframeStyle.width = divStyle.width;
- iframeStyle.height = this.suggestionsDiv.offsetHeight;
- iframeStyle.display = '';
- }
- },
- //定位层
- positionSuggestionsDiv: function() {
- var top = (this.getTop()+this.textInput.offsetHeight) ;
- var left = this.getLeft() ;
- var width = this.textInput.offsetWidth ;
- var divStyle = this.suggestionsDiv.style;
- divStyle.top = top + "px";
- divStyle.left = left + "px";
- if ( this.options.matchTextWidth ){
- divStyle.width = width+ "px";
- }
- },
- //隐藏层
- hideSuggestions: function() {
- this.suggestionsDiv.style.display = 'none';
- if(isIE){
- if(this.iframeSuggestions)
- this.iframeSuggestions.style.display = 'none';
- }
- },
- //创建层
- createSuggestionsDiv: function() {
- this.suggestionsDiv = document.createElement("div");
- this.suggestionsDiv.className = this.options.suggestDivClassName;
- var divStyle = this.suggestionsDiv.style;
- divStyle.position = 'absolute';
- divStyle.zIndex = 101;
- divStyle.display = "none";
- this.textInput.parentNode.appendChild(this.suggestionsDiv);
- },
- //更新层
- updateSuggestionsDiv: function() {
- this.suggestionsDiv.innerHTML = "";
- //如果有hidden变量,清空隐藏字段的值
- if(this.options.hiddenId != "" && this.options.hiddenId.length >0){
- $(this.options.hiddenId).value ="";
- }
- var suggestLines = this.createSuggestionSpans();
- for ( var i = 0 ; i < suggestLines.length ; i++ ){
- this.suggestionsDiv.appendChild(suggestLines[i]);
- }
- },
- //创建层中的选项span
- createSuggestionSpans: function() {
- var regExpFlags = "";
- if ( this.options.ignoreCase )
- regExpFlags = 'i';
- var startRegExp = "^";
- if ( this.options.matchAnywhere )
- startRegExp = '';
- //正则表达式匹配
- var regExp = new RegExp( startRegExp + this.lastRequestString, regExpFlags );
- var suggestionSpans = new Array();
- for ( var i = 0 ; i < this.suggestions.length && i<this.options.count ; i++ )
- suggestionSpans.push( this.createSuggestionSpan( i, regExp ) )
- return suggestionSpans;
- },
- //创建单个选项span
- createSuggestionSpan: function( n, regExp ) {
- var suggestion = this.suggestions[n];
- var suggestionSpan = document.createElement("span");
- suggestionSpan.className = this.options.suggestionClassName;
- suggestionSpan.style.width = '100%';
- suggestionSpan.style.display = 'block';
- suggestionSpan.id = this.id + "_" + n;
- suggestionSpan.onmouseover = this.mouseoverHandler.bindAsEventListener(this);
- suggestionSpan.onclick = this.itemClickHandler.bindAsEventListener(this);
- var textValues = this.splitTextValues( suggestion.districtName+"",
- this.lastRequestString.length,
- regExp );
- var textMatchSpan = document.createElement("span");
- textMatchSpan.id = this.id + "_match_" + n;
- textMatchSpan.className = this.options.matchClassName;
- textMatchSpan.onmouseover = this.mouseoverHandler.bindAsEventListener(this);
- textMatchSpan.onclick = this.itemClickHandler.bindAsEventListener(this);
- textMatchSpan.appendChild( document.createTextNode(textValues.mid) );
- suggestionSpan.appendChild( document.createTextNode( textValues.start ) );
- suggestionSpan.appendChild( textMatchSpan );
- suggestionSpan.appendChild( document.createTextNode( textValues.end ) );
- //把小区地址显示在小区名后面
- //suggestionSpan.appendChild(document.createTextNode(" "+suggestion.address ) );
- suggestionSpan.innerHTML+=" "+suggestion.address;
- return suggestionSpan;
- },
- //鼠标经过处理
- mouseoverHandler: function(e) {
- var src = e.srcElement ? e.srcElement : e.target;
- var index = parseInt(src.id.substring(src.id.lastIndexOf('_')+1));
- this.updateSelection(index);
- },
- //鼠标点击处理
- itemClickHandler: function(e) {
- this.mouseoverHandler(e);
- //鼠标点击把数据set入输入框!
- this.setInputFromSelection();
- this.hideSuggestions();
- },
- //分拆字符串
- splitTextValues: function( text, len, regExp ) {
- var startPos = text.search(regExp);
- var matchText = text.substring( startPos, startPos + len );
- var startText = startPos == 0 ? "" : text.substring(0, startPos);
- var endText = text.substring( startPos + len );
- return { start: startText, mid: matchText, end: endText };
- },
- //如果只需要显示列表里的文字而已 可以调用此方法
- getElementContent: function(element) {
- return element.firstChild.data;
- }
- };
发表评论
-
Google Finance Chart 类似例子收集
2010-11-10 11:51 2405Google威武,Google开发的这个组件打开速度非常快,用 ... -
基于RBAC的权限设计模型
2007-10-28 13:51 8385c: 1 RBAC 介绍 RBAC ... -
基于角色管理的系统访问控制
2007-10-28 13:50 1786基于角色管理的系统访 ... -
使用DWR实现搜索自动提示(三)
2007-06-28 21:59 2425事件处理类 js 代码 //控制器类 ... -
使用DWR实现搜索自动提示(一)
2007-06-28 21:42 3481最近在公司实现了一个类似google suggest的功能,拿 ... -
详细解析Java中抽象类和接口的区别(来自:java060515)
2007-05-11 20:35 1342在Java语言中, abstr ... -
校验值对象——应用Visitor模式和反射
2007-05-02 10:30 2184对Web页面上的输入进行 ...
相关推荐
在这个实例中,“DWR实现Google自动提示功能”是利用DWR框架来构建一个类似于Google搜索框的自动提示功能,用户在输入框中输入时,后台会实时地根据输入内容提供相关的建议,无需页面刷新。 一、DWR框架详解: DWR...
3. **DWR实现搜索提示的步骤** - **创建Java后台服务**:首先,你需要在Java后端编写一个服务接口,该接口接收用户的输入并返回相关的搜索建议。这可能涉及到数据库查询或者其他数据源的操作。 - **配置DWR**:在...
在这个“搜索提示框的自动显示DWR实现实例”中,我们将探讨如何利用DWR技术创建一个智能、高效的搜索输入框,当用户输入时,自动显示相关建议,提升用户体验。 首先,我们需要理解DWR的基本工作原理。DWR通过在后台...
4. **AutoComplete**:DWR提供了自动完成功能,用于在客户端输入框中动态提示可能的匹配项,例如在搜索框中输入内容时显示建议列表。 5. **Echo**:DWR的Echo功能允许在后台执行长时间的任务,同时保持与客户端的...
在这个“dwr实现聊天室+级连+搜索提示”的项目中,我们将探讨以下几个关键知识点: 1. **DWR聊天室实现**: 聊天室的实现通常涉及客户端和服务器端的实时数据交换。DWR通过创建JavaScript对象(Callee)来映射...
本示例主要展示了如何使用纯JSP和Direct Web Remoting (DWR)技术来构建一个功能丰富的用户界面,其中包括三级联动下拉选择菜单、无刷新联动、用户存在性判断以及模拟Google搜索效果的功能。DWR是一种JavaScript库,...
在本文中,我们将深入探讨如何使用Ajax、Direct Web Remoting (DWR) 框架以及Hibernate ORM工具来实现一个自动补全功能。这个功能类似于百度搜索引擎中的输入提示,能够根据用户输入的字符动态地提供可能的搜索建议...
综上所述,结合JQuery和DWR实现的自动补全功能,不仅提升了用户输入体验,也为开发者提供了一种高效的数据交互手段。在实际开发中,可以根据项目需求灵活调整和优化,以达到最佳效果。在压缩包文件"buquan"中可能...
一旦服务器完成查询,它会将结果返回给客户端,DWR会自动将这些数据更新到页面的JavaScript变量中,从而实现在用户输入过程中动态更新下拉提示列表。 实现这个功能的具体步骤包括: 1. **配置DWR**:在Web应用中...
3. **AutoComplete**: DWR支持自动完成功能,常用于输入框中智能提示,如搜索建议等。 4. **CORS(Cross-Origin Resource Sharing)**: DWR支持跨域资源共享,允许来自不同源的HTTP请求访问同一资源,扩展了Web应用...
标题 "Dwr+AutoComplete+pinyin4j 自动匹配(中文,拼音)" 提到的技术栈涉及了三个关键部分:DWR(Direct Web Remoting)、AutoComplete(自动完成)和pinyin4j。这些技术在Web开发中都有特定的应用场景。 DWR是一...
- **AutoComplete**:提供自动完成功能,常用于搜索框,根据用户输入的字符动态提示可能的匹配项。 - **Remote JavaScript**:允许在服务器端生成并执行JavaScript代码,进一步增强了动态性。 4. **DWR的安装与...
Direct Web Remoting (DWR) 是一个开源Java库,它允许JavaScript在Web浏览器中与服务器端的Java对象进行交互,从而实现动态、实时的Web应用。这个“dwr官方资料和搜集资料大全”包含了丰富的资源,帮助开发者深入...
- **AutoComplete**:DWR提供了自动完成功能,常用于搜索框的智能提示。 在深入学习DWR的过程中,你可能还会遇到如何处理异步调用、错误处理、性能优化等方面的问题。通过阅读"DWR框架开发详解从入门到精通"这本书...
在实现二级联动和Google输入下拉提示的过程中,DWR可以发挥重要作用。首先,我们可以创建两个Java后台服务,分别处理一级和二级数据的查询。例如,一个服务返回省份列表,另一个服务接收省份ID作为参数,返回对应的...
- **Auto-Complete**:DWR提供了自动完成功能,常用于搜索框的实时提示。 2. **DWR的工作原理** - **Reverse Ajax**:DWR利用了HTTP长连接,使得服务器可以主动向客户端推送数据。 - **JavaScript与Java的映射**...
标题“快速输入地址”可能指的是在网页应用中实现快速、自动完成的地址输入功能,这通常涉及到JavaScript和服务器端的交互。在这个场景下,DWR(Direct Web Remoting)可能是被使用的工具,它是一个开源Java框架,...
标题 "像Google的文本框的Ajax例子" 涉及的是使用Ajax技术来实现类似Google搜索框的实时提示功能。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过...
DWR通过自动处理JavaScript和Java之间的转换,使得在Web 2.0应用中实现动态交互变得更加简单。 **Web 2.0的特点**: 1. **内容聚合**:通过RSS订阅,用户可以聚合来自多个来源的信息。 2. **用户贡献内容**:用户...