关注设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享jquery 模拟类搜索框自动完成搜索提示功能(改进)教程,希望对大家能有一点小小的帮助。
代码:
代码如下：
/*
* @date: -5-22 21:42:15
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:类似GOOGLE搜索框提示功能
*/
(function($) {
$. = function (options) {
defaults = {
,
keyLeft : 37,//向左方向键
keyUp : 38,//向上方向键
keyRight : 39,//向右方向键
keyDown : 40,//向下方向键
keyEnter : 13,//回车键
listHoverCSS: jhover,//提示框列表鼠标悬浮的样式
tpl : divdiv{word}/divdiv约{view}条记录/div/div,
||
};
var options = $.extend(defaults, options);
var dropDiv = $(div/div).addClass(dropDiv).appendTo(ody);
var isOver = false;
(function(){
isOver = true;
}, function(){
isOver = false;
});
return (function(){
var pa = $(this);
$(this).bind(keydown, function(event){
if ((\) != one) {//当提示层显示时才对键盘事件处理
var currentList = (. + );
if ( == ) {//如果按的是向下方向键
if ( == 0) {
//如果提示列表没有一个被选中,则将列表第一个选中
$(this).val(getPointWord((.list:first)
.mouseover()));
} else if (() == 0) {
//如果是最后一个被选中,则取消选中,即可认为是输入框被选中
unHoverAll();
} else {
unHoverAll();
//将原先选中列的下一列选中
if (() != 0)
$(this).val(getPointWord(()
.mouseover()));
}
return false;
} else if ( == ) {//如果按的是向上方向键
if ( == 0) {
$(this).val(getPointWord((.list:last)
.mouseover()));
} else if (() == 0) {
unHoverAll();
} else {
unHoverAll();
if (() != 0)
$(this).val(getPointWord(()
.mouseover()));
}
return false;
}else if( == ) ()();
}
//当按下键之前记录输入框值,以方便查看键弹起时值有没有变
$(this).attr(alt, $(this).val());
}).bind(keyup, function(event){
//如果弹起的键是向上或向下方向键则返回
if( == || == ) return;
if($(this).val() == \){
()();
return;
}
//若输入框值没有改变或变为空则返回
if ($(this).val() == $(this).attr(alt))
return;
getData(pa, $(this).val());
}).bind(lur, function(){
if(isOver&&(. + )!=0) return;
//文本输入框失去焦点则清空并隐藏提示层
()();
});
/**处理ajax返回成功的方法**/
handleResponse = function(parent, json) {
var isEmpty = true;
for(var o in json){
if(o == data) isEmpty = false;
}
if(isEmpty) {
showError("返回数据格式错误,请检查请求URL是否正确!");
return;
}
if(json[data].length == 0) {
//返回数据为空
return;
}
refreshDropDiv(parent, json);
();
}
/**处理ajax失败的方法**/
handleError = function(error) {
//showError("由于url错误或超时请求失败!");
}
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 ; i+=1) {
appendStr += (/{([a-z]+)}/ig, function(m, n) {
return res[i][n];
});
}
jebind(parent, appendStr);
}
/**将新建dom对象插入到提示框中,并重新绑定mouseover事件监听**/
jebind = function(parent, a) {
();
(.list).each(function() {
$(this).unbind(mouseover).mouseover(function() {
unHoverAll();
$(this).addClass();
}).unbind(click).click(function(){
parent.val(getPointWord($(this)));
()();
();
});
});
}
/**将提示框中所有列的hover样式去掉**/
unHoverAll = function() {
(.list).each(function() {
$(this).removeClass();
});
}
/**在提示框中取得当前选中的提示关键字**/
getPointWord = function(p) {
return (\)()
}
/**刷新提示框,并设定样式**/
refreshDropDiv = function(parent, json) {
var left = ();
var height = ();
var top = () + + height;
var width = || () + px;
();
dropDiv.css( {
order : 1px solid #FE00DF,
left : left,
op : top,
width : width
});
render(parent, json);
//防止ajax返回之前输入框失去焦点导致提示框不消失
();
}
/**通过ajax向服务器请求数据**/
getData = function(parent, word) {
$.ajax( {
type : GET,
data : "word="+ word,
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;
}
.dropDiv .jhover {
background-color: #00FEDF;
}
.dropDiv .list {
;
%;
}
.dropDiv .word {
;
}
.dropDiv .view {
;
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-1.0.1.js"/script
script type="text/javascript"
$(function(){
$("input").autopoint({url:？});
});
/script
body
input type="text" size="50" /
input type="text" size="50" /
/body
servlet主要部分:
代码如下：
("");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF-8");
String word = request.getParameter("word");
if(Utils.isBlank(word)) return;
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
MapString, Object map1 = new HashMapString, Object();
map1.put("word", word + "a1");
map1.put("view", 10);
MapString, Object map2 = new HashMapString, Object();
map2.put("word", word + "a2");
map2.put("view", 15);
MapString, Object map3 = new HashMapString, Object();
map3.put("word", word + "a3");
map3.put("view", 2);
array.add(JSONObject.fromObject(map1));
array.add(JSONObject.fromObject(map2));
array.add(JSONObject.fromObject(map3));
json.put("data", array);
PrintWriter out = response.getWriter();
out.print(json.toString());
out.close();
其中JSONObject和JSONArray类来自json-lib.jar,为了测试方便,是直接返回数据的,实际应用中可以替换为
从数据源查取数据.
