返回首页

实现仿百度搜索提示框jQuery自动完成源代码

时间:2012-01-19 20:19来源:知行网www.zhixing123.cn 编辑:麦田守望者

<html>
<head><title>AutoComplete-Sample</title>

<style>
#auto_div{
position:absolute;
border-width:1px;
border:1px #808080 solid; }

</style>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
//高亮的索引
var highLightIndex = -1;
//超时的标识(对用户连续快速按下键盘的事件做延时处理,只对用户在500ms内最后一次请求,让其生效)
var timeoutId;
$(document).ready(function () {
init();
$('#auto_txt').bind('keyup', processKeyup);
});

/**
* 处理键盘按下后弹起的事件
* @param event
*/
function processKeyup(event) {
var myEvent = event || windows.event;
var keyCode = myEvent.keyCode;
//输入是字母,或者退格键则需要重新请求
if ((keyCode >= 65 && keyCode <= 90) || keyCode == 8) {
//以下两行代码是为了防止用户快速输入导致频繁请求服务器
//这样便可以在用户500ms内快速输入的情况下,只请求服务器一次
//大大提高服务器性能
highLightIndex = -1;
clearTimeout(timeoutId);
timeoutId = setTimeout(processAjaxRequest, 100);
//处理上下键(up,down)
} else if (keyCode == 38 || keyCode == 40) {
processKeyUpAndDown(keyCode);
//按下了回车键
} else if (keyCode == 13) {
processEnter();
}
}

/***
* 初始化弹出框列表的位置,大小
*/
function init() {
$('#auto_div').hide();
var pos = $('#auto_txt').position();
var topPosition = pos.top + $('#auto_txt').height() + 7;
var leftPosition = pos.left;
$('#auto_div').offset({ top: topPosition, left: leftPosition });
$('#auto_div').width($('#auto_txt').width());
//$('#auto_div').css('position','absolute');
}

/**
* 处理Ajax请求
* @param data
*/
function processAjaxRequest() {
$.ajax({
type: "post", //http请求方法,默认:"post"
url: "/Office/GetSQ.ashx", //发送请求的地址
data: "reqWord=" + $('#auto_txt').val(),
success: processAjaxResponse
});
}

/**
* 处理Ajax回复
* @param data Ajax请求得到的返回结果为dom文档对象
*/
function processAjaxResponse(data) {
$('#auto_div').html('').show();

 

var words = data.split("-");


 

jQuery.each(words, function (i) {
 

var word_div = $("<div style='width:100%;'></div>");
word_div.html(words[i]);
word_div.hover(fnOver, fnOut);
word_div.click(getAutoText);
$('#auto_div').append(word_div);


 

});





}

/**
* 处理鼠标滑过
*/
function fnOver() {
//alert($(this));
changeToWhite();
$(this).css('background-color', 'pink');
//alert($(this).index());
highLightIndex = $(this).index();
//下面一行注释掉了,百度搜索也没这功能,就是鼠标移动时,跟着改变搜索框的内容
//$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
}

/**
* 处理鼠标移除
*/
function fnOut() {
$(this).css('background-color', 'white');
}

/**
* 得到自动填充文本
*/
function getAutoText() {
//有高亮显示的则选中当前选中当前高亮的文本
if (highLightIndex != -1) {
$('#auto_txt').val($(this).html());
$('#auto_div').html('').hide();
}
}

/**
* 处理按下Enter键
* @param keyCode
*/
function processEnter() {
if (highLightIndex != -1) {
$('auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
$('#auto_div').html('').hide();
}
}

/**
* 处理按上下键的情况
*/
function processKeyUpAndDown(keyCode) {
var words = $('#auto_div').children();
var num = words.length;
if (num <= 0) return;
changeToWhite();
highLightIndex = ((keyCode != 38 ? num + 1 : num - 1) + highLightIndex) % num;
words.eq(highLightIndex).css('background-color', 'pink');
$('#auto_txt').val(words.eq(highLightIndex).html());
}

/**
* 如果有高亮的则把高亮变白
*/
function changeToWhite() {
if (highLightIndex != -1) {
$('#auto_div').children().eq(highLightIndex).css('background-color', 'white');
}
}
</script>
</head>
<body>
自动完成示例 <input type="text" id="auto_txt"><input type="button" value="提交">
<div style="border-width:1px;" id="auto_div"></div>
</body>
</html>

 

------分隔线----------------------------
标签(Tag):jQuery
------分隔线----------------------------
推荐内容
  • SQL Server 2008 sa登录报18456错误的解决方法

    许多人用SQL Server用的时间长了会自动报18456错误,SQL Server 18456错误应该说很好...

  • Windows 2003 IIS如何启用Gzip压缩的方法

    经常看到网上有人提问说:开GZIP压缩有什么好处?Gzip开启以后会将输出到用户浏览器的...

  • IIS自定义404错误页面提示系统找不到指定的文件问题

    我们在IIS站点属性里面设置了自定义的404错误页面为一个文件之后,不知道为什么一直不...

  • 支持IPv4与IPv6双协议栈的Web服务器设计实践教程

    嵌入式Web技术因其跨平台的特点得到了广泛的应用[1]。用户只需要登录浏览器即可实现对...

  • SQL查询中回表对性能的影响

    运营反馈某个功能速度很慢,查了一下,定位到如下 SQL: select id from user where n...

  • 高校数据安全全过程管理实践教程

    《网络安全法》出台后,以法律的形式明确要求各类组织切实承担起保障数据安全的责任,...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8国际平台入口
  • Photoshop龙8国际平台入口
  • 3DMAX龙8国际平台入口
  • AutoCAD龙8国际平台入口
  • CorelDRAW龙8国际平台入口
  • Matlab龙8国际平台入口
  • 其他龙8国际平台入口
  • .Net龙8国际平台入口
  • Asp龙8国际平台入口
  • Php龙8国际平台入口
  • Jsp龙8国际平台入口
  • Ajax龙8国际平台入口
  • Android教程
  • 其他龙8国际平台入口
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影