jquery模拟类搜索框自动完成搜索提示功能(改进)

网络编程 JavaScript javascript类库 jquery 分类:[default] 更新日期: 2016-01-28
改进版,支持多个输入框!前面因为多个输入框信息不好保存所以只能支持一个,现在用输入框的alt属性来保存修改前的内容,所以能支持多个输入框了.初步测试没发现问题,欢迎大家一起测试改进!!!
autopoint.js代码:
代码如下:

/*
* @date: 2010-5-22 21:42:15
* @author: 胡灵伟
* Depends:
* jquery.js
*
* function:类似GOOGLE搜索框提示功能
*/
(function($) {
$.fn.autopoint = function (options) {
defaults = {
url:options.url,
keyLeft : 37,//向左方向键
keyUp : 38,//向上方向键
keyRight : 39,//向右方向键
keyDown : 40,//向下方向键
keyEnter : 13,//回车键
listHoverCSS : 'jhover',//提示框列表鼠标悬浮的样式
tpl : '<div class="list"><div class="word">{word}</div><div class="view">约{view}条记录</div></div>',
topoffset:options.topoffset||5
};
var options = $.extend(defaults, options);
var dropDiv = $('<div></div>').addClass('dropDiv').appendTo('body');
var isOver = false;
dropDiv.hover(function(){
isOver = true;
}, function(){
isOver = false;
});
return this.each(function(){
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) {
//如果提示列表没有一个被选中,则将列表第一个选中
$(this).val(getPointWord(dropDiv.find('.list:first')
.mouseover()));
} else if (currentList.next().length == 0) {
//如果是最后一个被选中,则取消选中,即可认为是输入框被选中
unHoverAll();
} 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) {
$(this).val(getPointWord(dropDiv.find('.list:last')
.mouseover()));
} else if (currentList.prev().length == 0) {
unHoverAll();
} else {
unHoverAll();
if (currentList.prev().length != 0)
$(this).val(getPointWord(currentList.prev()
.mouseover()));
}
return false;
}else if(event.keyCode == options.keyEnter) dropDiv.empty().hide();
}
//当按下键之前记录输入框值,以方便查看键弹起时值有没有变
$(this).attr('alt', $(this).val());
}).bind('keyup', function(event){
//如果弹起的键是向上或向下方向键则返回
if(event.keyCode == options.keyDown||event.keyCode == options.keyUp) return;
if($(this).val() == ''){
dropDiv.empty().hide();
return;
}
//若输入框值没有改变或变为空则返回
if ($(this).val() == $(this).attr('alt'))
return;
getData(pa, $(this).val());
}).bind('blur', function(){
if(isOver&&dropDiv.find('.' + options.listHoverCSS)!=0) return;
//文本输入框失去焦点则清空并隐藏提示层
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是否正确!");
return;
}
if(json['data'].length == 0) {
//返回数据为空
return;
}
refreshDropDiv(parent, json);
dropDiv.show();
}
/**处理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 < 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('click').click(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() + 'px';
dropDiv.empty();
dropDiv.css( {
'border' : '1px solid #FE00DF',
'left' : left,
'top' : top,
'width' : width
});
render(parent, json);
//防止ajax返回之前输入框失去焦点导致提示框不消失
parent.focus();
}
/**通过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 {
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-1.0.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").autopoint({url:'http://localhost/xun/ajax.svl?method=getsearchhelp'});
});
</script>
<body>
<input type="text" size="50" />
<input type="text" size="50" />
</body>

servlet主要部分:
代码如下:

response.setContentType("text/html");
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();
Map<String, Object> map1 = new HashMap<String, Object>();
map1.put("word", word + "a1");
map1.put("view", 10);
Map<String, Object> map2 = new HashMap<String, Object>();
map2.put("word", word + "a2");
map2.put("view", 15);
Map<String, Object> map3 = new HashMap<String, 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,为了测试方便,是直接返回数据的,实际应用中可以替换为
从数据源查取数据.

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • BootStrap使用popover插件实现鼠标经过显示并保持显示框
    BootStrap使用popover插件实现鼠标经过显示并保持显示框
    这篇文章主要介绍了BootStrap使用popover插件实现鼠标经过显示并保持显示框的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: < ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
  • jQuery如何用正则表达式验证手机号、身份证号、中文名称
    这篇文章主要介绍了jQuery如何用正则表达式验证手机号.身份证号.中文名称 的相关资料,需要的朋友可以参考下数字判断方法:isNaN()函数 test()方法 判断字符串中是否匹配到正则表达式内容,返回的是boolean值 ( true / false ) // 验证中文名称 function isChinaName(name) { var pattern ...
  • Jquery和BigFileUpload实现大文件上传及进度条显示
    Jquery和BigFileUpload实现大文件上传及进度条显示
    这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面 ...
  • 完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位
    完美解决jsp页面在IE8下文本模式自动为(杂项Quirks)导致页面显示错位
    下面小编就为大家带来一篇完美解决jsp页面在IE8下文本模式自动为杂项Quirks导致页面显示错位.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式 ...
  • ASP.NETWebApi2实现多文件打包并下载文件的实例
    ASP.NETWebApi2实现多文件打包并下载文件的实例
    这篇文章主要介绍了ASP.NET Web Api 2利用ByteArrayContent和StreamContent实现多文件打包并下载的方法,提供源码下载,需要的朋友可以参考下.最近由于工作和个人事务,站点也好久没更新了,但这并不影响我对.NET的热情.站点的更新工作还是得想办法抽时间来完成的. 今天利用中午的时间来写一篇关于Asp.Net Web Api ...
猜你喜欢