返回首頁
當前位置: 主頁 > 網絡編程 > .Net實例教程 >

實現仿百度搜索提示框jQuery自動完成源代碼

時間:2012-01-19 20:19來源:知行網www.f1globe.com 編輯:麥田守望者

<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
------分隔線----------------------------
推薦內容
猜你感興趣
99久久免费高清热精品