DWR实现搜索自动提示

最新推荐文章于 2024-07-25 14:02:05 发布

liuya1985liuya

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量2.3k

点赞数

文章标签： dwr function autocomplete mozilla javascript 正则表达式

实现了一个类似google suggest的功能，拿来和大家分享一下。主要使用javascipt + Dwr + spring +hibernate

使用Dwr当然是免不了要配置，先来看一下Dwr是如何把我们的service层（spring bean中的）方法暴露给前端js的，它使得前端使用service就像使用javascript自定义的函数一样方便。

xml 代码

<dwr>
<allow>
<create creator="spring" javascript="DistrictLocationService">
<param name="beanName" value="districtLocationService" />
<include method="findAllByLocationRangeFor51ditu" />
<include method="findAllByKeywords" />
create>
<convert converter="bean" match="com.goojia.dal.model.DistrictLocation">
<param name="include" value="id,districtName,avgPrice,address,houseCount,lng51,lat51">param>
convert>
allow>
dwr>

java 代码

service 层查找方法
/**
* 根据输入的关键字查询小区信息,最大返回MAX_DISTRICT条记录
* @param keywords
* @return
*/
public List findAllByKeywords(String keywords){
}

前面使用非常简单。只需要把生成的javascript导入把componet组件放到你想放文本输入框的地方，并设置一下你想使用的样式，如果不传，将使用默认的样式

html 代码

<ww:component id="district" name="districtName" template="autocomplete">
<ww:param name="size">40ww:param>
<ww:param name="maxlength">30ww:param>
<ww:param name="dwrMethod">DistrictLocationService.findAllByKeywordsww:param>
<ww:param name="hiddenId">'districtId'ww:param>
ww:component>

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

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

liuya1985liuya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
DWR实现搜索自动提示

实现了一个类似google suggest的功能，拿来和大家分享一下。主要使用javascipt + Dwr + spring +hibernate使用Dwr当然是免不了要配置，先来看一下Dwr是如何把我们的service层（spring bean中的）方法暴露给前端js的，它使得前端使用service就像使用javascript自定义的函数一样方便。xml 代码xml 代码
复制链接

扫一扫