jquery实现搜索框类似提示功能(改进)

用JQuery实现的类似GOOGLE\BAIDU搜索框的提示功能.

程序在一个页面只能创建一个提示搜索框,因为对js也不熟,所以还不知道怎么解决...

继续改进版,支持多个输入框!初步测试没发现问题,欢迎大家一起测试改进!!!

autopoint.js代码:

 

 

/*
* @date: 2010-5-22 21:42:15
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:类似GOOGLE搜索框提示功能
* use:$("#input1, #input2").autopoint({url:"url", submit:["submit1", "submit2"]});
* 对所有需要自动提示功能的输入框对象使用autopoint方法，
* url为ajax提交的url,submit为输入框enter键提交的action
*/
( function ($) {
$.fn.autopoint = function (options) {
var bt = $.browser;
// 根据浏览器设定不同属性
dialect = bt.msie ? {
topoffset: 5 , // 提示框top属性与输入框偏移
widthoffset: 6 // 提示框width属性与输入框偏移
}:bt.mozilla ? {
topoffset: 5 ,
widthoffset: 2
}:bt.safari ? {
topoffset: 6 ,
widthoffset: 2
}:bt.opera ? {
topoffset: 5 ,
widthoffset: 2
}:{
topoffset: 5 ,
widthoffset: 2
};
defaults = {
url:options.url,
keyUp : 38 , // 向上方向键
keyDown : 40 , // 向下方向键
keyEnter : 13 , // 回车键
listHoverCSS : ' jhover ' , // 提示框列表鼠标悬浮的样式
tpl : ' <div class="list"><div class="word">{word}</div><div class="view">{view}</div></div> ' ,
submit:options.submit
};
var originalVal = new Array();
var lastVal = new Array();
var options = $.extend(defaults, $.extend(dialect, options));
var dropDiv = $( ' <div></div> ' ).addClass( ' dropDiv ' ).appendTo( ' body ' );
return this .each( function (i){
var pa = $( this );
$( this ).bind( ' keydown ' , function (event){
if (dropDiv.css( ' display ' ) != ' none ' ) { // 当提示层显示时才对键盘事件处理
var currentList = dropDiv.find( ' . ' + options.listHoverCSS);
if (event.keyCode == options.keyDown) { // 如果按的是向下方向键
if (currentList.length == 0 ) {
originalVal[i] = $( this ).val();
// 如果提示列表没有一个被选中,则将列表第一个选中
$( this ).val(getPointWord(dropDiv.find( ' .list:first ' )
.mouseover()));
} else if (currentList.next().length == 0 ) {
// 如果是最后一个被选中,则取消选中,即可认为是输入框被选中
unHoverAll();
$( this ).val(originalVal[i]);
} else {
unHoverAll();
// 将原先选中列的下一列选中
if (currentList.next().length != 0 )
$( this ).val(getPointWord(currentList.next()
.mouseover()));
}
return false ;
} else if (event.keyCode == options.keyUp) { // 如果按的是向上方向键
if (currentList.length == 0 ) {
originalVal[i] = $( this ).val();
$( this ).val(getPointWord(dropDiv.find( ' .list:last ' )
.mouseover()));
} else if (currentList.prev().length == 0 ) {
unHoverAll();
$( this ).val(originalVal[i]);
} else {
unHoverAll();
if (currentList.prev().length != 0 )
$( this ).val(getPointWord(currentList.prev()
.mouseover()));
}
return false ;
} else if (event.keyCode == options.keyEnter) {
// console.debug(currentList.length);
if (currentList.length == 0 )
if (options.submit[i]) {
$( ' # ' + options.submit[i]).submit();
}
dropDiv.empty().hide();
return ;
}
} else if (event.keyCode == options.keyEnter)
// console.debug(options.submit[i]);
if (options.submit[i]) {
$( ' # ' + options.submit[i]).submit();
return ;
}
}).bind( ' keyup ' , function (event){
// 输入框值没有改变返回
if ($( this ).val() == lastVal[i])
return ;
// 当按键弹起记录输入框值,以方便查看键值有没有变
lastVal[i] = $( this ).val();
// 输入框值变为空返回
if ($( this ).val() == '' ){
dropDiv.empty().hide();
return ;
}
// 如果按下的向上或是向下键,说明在选择
if (event.keyCode == options.keyUp || event.keyCode == options.keyDown) return ;
// 输入框中值有变化,发送请求
getData(pa, $( this ).val());
}).bind( ' blur ' , function (){
// 输入框失去焦点隐藏提示框,mousedown比
// blur优先触发所以先处理选择提示框的内容
dropDiv.empty().hide();
});

/* *处理ajax返回成功的方法* */
handleResponse = function (parent, json) {
var isEmpty = true ;
for ( var o in json){
if (o == ' data ' ) isEmpty = false ;
}
if (isEmpty) {
// showError("返回数据格式错误,请检查请求URL是否正确!");
dropDiv.empty().hide();
return ;
}
if (json[ ' data ' ].length == 0 ) {
// 返回数据为空
dropDiv.empty().hide();
return ;
}
refreshDropDiv(parent, json);
dropDiv.show();
};
/* *处理ajax失败的方法* */
handleError = function (error) {
dropDiv.empty().hide();
showError( " 请求失败! " + arguments[ 1 ]);
};
showError = function (error){
// alert(error);
};
/* *通过ajax返回json格式数据生成用来创建dom的字符串* */
render = function (parent, json) {
var res = json[ ' data ' ] || json;
var appendStr = '' ;
// 用json对象中内容替换模版字符串中匹配/\{([a-z]+)\}/ig的内容,如{word},{view}
for ( var i = 0 ; i < res.length; i += 1 ) {
appendStr += options.tpl.replace( / \{([a-z]+)\} / ig, function (m, n) {
return res[i][n];
});
}
jebind(parent, appendStr);
};
/* *将新建dom对象插入到提示框中,并重新绑定mouseover事件监听* */
jebind = function (parent, a) {
dropDiv.append(a);
dropDiv.find( ' .list ' ).each( function () {
$( this ).unbind( ' mouseover ' ).mouseover( function () {
unHoverAll();
$( this ).addClass(options.listHoverCSS);
}).unbind( ' mousedown ' ).mousedown( function (){
parent.val(getPointWord($( this )));
dropDiv.empty().hide();
parent.focus();
});
});
};
/* *将提示框中所有列的hover样式去掉* */
unHoverAll = function () {
dropDiv.find( ' .list ' ).each( function () {
$( this ).removeClass(options.listHoverCSS);
});
};
/* *在提示框中取得当前选中的提示关键字* */
getPointWord = function (p) {
return p.find( ' div:first ' ).text();
};
/* *刷新提示框,并设定样式* */
refreshDropDiv = function (parent, json) {
var left = parent.offset().left;
var height = parent.height();
var top = parent.offset().top + options.topoffset + height;
var width = options.width || (parent.width() + options.widthoffset) + ' px ' ;
dropDiv.empty();
dropDiv.css( {
// 'border' : '1px solid #999',
' left ' : left,
' top ' : top,
' width ' : width
});
render(parent, json);
// 防止ajax返回之前输入框失去焦点导致提示框不消失
parent.focus();
};
/* *通过ajax向服务器请求数据* */
getData = function (parent, word) {
$.ajax( {
type : ' POST ' ,
data : {word:word,rand:Math.random()},
url : options.url,
dataType : ' json ' ,
timeout : 1000 ,
success : function (json){handleResponse(parent, json);},
error : handleError
});
};
});
};
})(jQuery);

 

 

 

使用方法:

 

< style type ="text/css" >
.dropDiv {
position : absolute ;
z-index : 10 ;
display : none ;
cursor : hand ;
border : 1px solid #7F9DB9 ;
}

.dropDiv .jhover {
background-color : #D5E2FF ;
}
.dropDiv .list {
float : left ;
width : 100% ;
}
.dropDiv .word {
float : left ;
}

.dropDiv .view {
float : right ;
color : gray ;
text-align : right ;
font-size : 10pt ;
}
</ style >
< script type ="text/javascript" src ="../js/jquery-1.4.2.min.js" ></ script >
< script type ="text/javascript" src ="../js/autopoint.js" ></ script >
< script type ="text/javascript" >
$( function (){
$( " input " ).autopoint({url: ' http://localhost/xun/ajax.svl?method=getsearchhelp ' ,submit:[ " action1 " , " action2 " ]});
});
</ script >
</ head >
< body >
< input type ="text" id ="search" name ="search" size ="50" autocomplete ="off" >
< br />
< br />
< br />
< br />
< br />
< input type ="text" size ="50" autocomplete ="off" />
</ body >

 

 

 

 

servlet主要部分:

 

1 response.setContentType( " text/html " );
2 response.setHeader( " Cache-Control " , " no-cache " );
3 response.setCharacterEncoding( " UTF-8 " );
4 String word = request.getParameter( " word " );
5 if (Utils.isBlank(word)) return ;
6 JSONObject json = new JSONObject();
7 JSONArray array = new JSONArray();
8 Map < String, Object > map1 = new HashMap < String, Object > ();
9 map1.put( " word " , word + " a1 " );
10 map1.put( " view " , 10 );
11 Map < String, Object > map2 = new HashMap < String, Object > ();
12 map2.put( " word " , word + " a2 " );
13 map2.put( " view " , 15 );
14 Map < String, Object > map3 = new HashMap < String, Object > ();
15 map3.put( " word " , word + " a3 " );
16 map3.put( " view " , 2 );
17 array.add(JSONObject.fromObject(map1));
18 array.add(JSONObject.fromObject(map2));
19 array.add(JSONObject.fromObject(map3));
20 json.put( " data " , array);
21 PrintWriter out = response.getWriter();
22 out.print(json.toString());
23 out.close();

 

其中JSONObject和JSONArray类来自json-lib.jar,为了测试方便,是直接返回数据的,实际应用中可以替换为

从数据源查取数据.

转载于:https://www.cnblogs.com/adaikiss/archive/2010/05/23/1742020.html