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

sprite

浏览: 64004 次
性别:
来自: 上海

最近访客更多访客>>

wangyuvirgo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

程序设计

DWR 正则表达式 Opera prototype

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;
}
};

分享到：

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

2007-06-28 21:49
浏览 2890
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Google Finance Chart 类似例子收集

基于RBAC的权限设计模型

基于角色管理的系统访问控制

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

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

详细解析Java中抽象类和接口的区别(来自：java060515)

校验值对象——应用Visitor模式和反射

最近访客更多访客>>